今天要给大家介绍的,是一个让人眼前一亮的开源项目——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>
界面介绍
工作台
-
可拖拽的组件和模板区域
-
表单中组件的树状结构数据
-
表单的撤销和重做,防止操作出错后无法回退
-
预览设计的表单和清空表单中的所有组件
-
扩展操作按钮,支持扩展
-
录入数据按钮
-
针对表单整体的配置,支持设置表单样式尺寸,标签样式和表单事件
-
全局样式,全局事件和全局数据源配置
-
表单设计区域
-
修改终端类型,支持电脑端,ipad端和手机端
表单布局
-
针对表单整体配置, 可以调整表单表单尺寸, 标签位置,标签样式,提交按钮显示等
-
配置表单中标签的样式
-
配置表单的事件,支持监听表单的提交事件,组件初始化事件,组件渲染完毕事件,表单修改事件,远程请求发送前的事件
FcDesigner作为一个优秀的开源项目,为广大开发者提供了极大的便利。如果你对它感兴趣,欢迎访问它的GitHub仓库了解更多。
GitHub:https://github.com/xaboy/form-create-designer