热门搜索:
您现在的位置是：首页 > 文章详情

Vue 低代码可视化表单设计器 FcDesigner v3.2.6 版本发布

日期：2024-09-23点击：235

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); } }
 
原文链接：https://www.oschina.net/news/313074/fcdesigner-3-2-6-released
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章