FcDesigner低代码平台：让表单设计变得更简单

今天给大家介绍一个让人眼前一亮的开源项目——FcDesigner。

它是一个基于Vue和ElementPlus/ElementUI构建的表单设计器组件,通过拖拽的方式,让表单设计变得简单而优雅。

FcDesigner

FcDesigner由@form-create/element-ui提供支持,通过可视化界面,可以快速高效地创建表单,并输出为JSON格式。同时,通过加载JSON,渲染器可以渲染出相应的表单。它广泛应用于政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

特点

• 适配Vue2、Vue3

• 国际化：内置了中文、英文两种语言选项,充分考虑了全球化需求,无论是对外交流还是跨国业务,都能提供强大的语言支持。

• 灵活的组件与事件绑定：内置了36种常用组件,覆盖了多种场景需求。同时,提供了可配置的组件和表单事件功能,可以灵活应对各种动态交互需求

• 可视化操作：通过直观的图形界面,无需深入代码,就可以轻松完成表单页面的编辑。大大降低了使用门槛,让编辑工作变得更简单、更高效。

• 灵活的布局：提供了栅格、表格等多种复杂表单布局方式,让复杂的表单布局变得简洁明了,拓宽了用户的使用场景。

安装使用

我们以vue3版本为例

首先，安装 @form-create/designer 的 Vue 3 版本

npm install @form-create/designer

然后安装 Vue 3 版本的 form-create

npm install @form-create/element-ui@^3

使用

<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    const designer = ref(null);
</script>

界面介绍

工作台

1. 可拖拽的组件和模板区域

2. 表单中组件的树状结构数据

3. 表单的撤销和重做，防止操作出错后无法回退

4. 预览设计的表单和清空表单中的所有组件

5. 扩展操作按钮，支持扩展

6. 录入数据按钮

7. 针对表单整体的配置，支持设置表单样式尺寸，标签样式和表单事件

8. 全局样式，全局事件和全局数据源配置

9. 表单设计区域

10. 修改终端类型，支持电脑端，ipad端和手机端

表单布局

1. 针对表单整体配置, 可以调整表单表单尺寸, 标签位置,标签样式,提交按钮显示等

2. 配置表单中标签的样式

3. 配置表单的事件,支持监听表单的提交事件,组件初始化事件,组件渲染完毕事件,表单修改事件,远程请求发送前的事件

FcDesigner作为一个优秀的开源项目,为广大开发者提供了极大的便利。如果你对它感兴趣,欢迎访问它的GitHub仓库了解更多。

GitHub:https://github.com/xaboy/form-create-designer