Vue 低代码可视化表单设计器 FcDesigner v3.2.6 版本发布
FcDesigner 是一款低代码表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。 本项目采用 Vue 和 ElementPlus 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。 兼容 Vue2 和 Vue3 版本 帮助文档|在线演示|源码下载 3.2.6版本更新内容 新增 增加组件样式配置 新增 支持切换组件类型, 增加switchType配置项控制组件的切换规则, 和是否显示切换组件类型 新增 新增单选和多选组件支持显示输入框 新增 栅格组件支持自适应布局配置 新增 重新实现组件的验证规则配置组件 新增 增加复制组件id功能 新增 增加autoActive配置项, 控制是否自动选中拖入的组件 新增 增加clear事件,点击清空按钮后触发 新增 支持通过config.formOptions配置项配置表单默认配置 新增 输入框组件增加类型选择 新增 上传组件增加上传前置事件配置 新增 增加通过config.disabledItemConfig配置项禁用组件指定配置 新增 增加通过config.hiddenItemConfig配置项隐藏组件的指定配置 新增 导出模板支持生成vue3语法的模板,支持通过useTemplate配置项使用vue2语法的模板 新增 增加showInputData配置项控制录入默认值按钮显示 优化triggerActive方法, 简化手动选中组件的方式 修复已知的bug 安装 首先，安装@form-create/designer的 Vue 3 版本： sh npm install @form-create/designer@^3 安装 Vue 3 版本的form-create sh npm install @form-create/element-ui@^3 引入 CDN 引入 如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖： <!-- 引入 Element Plus 样式 --> <link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" /> <!-- 引入 Vue 3 --> <script src="https://unpkg.com/vue"></script> <!-- 引入 Element Plus --> <script src="https://unpkg.com/element-plus/dist/index.full.js"></script> <!-- 引入 form-create 和 designer --> <script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script> <script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script> <div id="app"> <fc-designer height="100vh"></fc-designer> </div> <script> const { createApp } = Vue; const app = createApp({}); app.use(ElementPlus); app.use(FcDesigner); app.use(FcDesigner.formCreate); app.mount('#app'); </script> Node.js 引入 对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置： import { createApp } from 'vue'; import FcDesigner from '@form-create/designer'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; // 创建 Vue 应用 const app = createApp(App); // 使用 Element Plus 和 FcDesigner app.use(ElementPlus); app.use(FcDesigner); app.use(FcDesigner.formCreate); // 挂载应用 app.mount('#app'); 使用 在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件： <template> <fc-designer ref="designer" height="100vh" /> </template> <script setup> import { ref } from 'vue'; // 可以在此处获取设计器实例或进行其他操作 const designer = ref(null); </script> 获取设计表单的数据 在表单设计器中，可以通过以下方法获取表单的生成规则和配置，这些数据通常会被保存到数据库中，以便后续加载和回显。 //获取表单的生成规则 const ruleJson = this.$refs.designer.getJson(); //获取表单的配置 const optionsJson = this.$refs.designer.getOptionsJson(); //todo 保存JSON数据到数据库中 这些数据可以用来保存到数据库中，确保表单的状态和配置可以在页面刷新或重新加载时恢复。 回显设计表单 当需要回显设计好的表单时，您需要加载之前保存的 JSON 规则和配置，并将其应用到设计器中。 //todo 加载表单JSON规则 //回显表单 this.$refs.designer.setOptions(optionsJson); this.$refs.designer.setRule(ruleJson); 通过这些方法，可以将之前保存的表单规则和配置应用到设计器中，从而恢复表单的状态。 表单渲染 要渲染表单，您需要挂载 form-create 到 Vue 应用中，并加载表单规则和配置。 //从设计器中导入 formCreate import {formCreate} from '@form-create/designer'; //挂载 formCreate app.use(formCreate); 表单渲染示例 <template> <div id="app"> <form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create> </div> </template> <script> import {formCreate} from '@form-create/designer'; export default { data() { return { //实例对象 fApi: {}, //表单数据 formData: {}, //表单生成规则 rule: [], //组件参数配置 option: {} } }, beforeCreate(){ const rule,option; // todo 加载表单JSON规则 this.rule = formCreate.parseJson(rule); this.option = formCreate.parseJson(option); } } </script> 动态加载和保存表单配置 可以通过 API 请求动态加载表单规则和配置，并将表单数据保存到服务器。 import axios from 'axios'; // 加载表单配置 async function loadFormConfig() { try { const response = await axios.get('/api/form-config'); return response.data; } catch (error) { console.error('加载表单配置失败', error); return { rule: [], option: {} }; } } // 保存表单配置 async function saveFormConfig(ruleJson, optionsJson) { try { await axios.post('/api/form-config', { rule: ruleJson, options: optionsJson }); } catch (error) { console.error('保存表单配置失败', error); } }
