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

可视化表单设计 FcDesigner v3.1.0 发布，新增 12 个组件，支持事件配置等

日期：2024-06-03点击：203

FcDesigner 是一款可视化表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。

本项目采用 Vue 和 ElementPlus 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

兼容Vue2和Vue3版本

 帮助文档  |  在线演示 |  源码下载

3.2.0 (2024-06-01)​

  • 增加12个可拖拽组件,目前共内置了36个可拖拽组件
  • 新增表格布局
  • 新增表格表单组件
  • 增加表单结构预览
  • 增加默认值录入功能
  • 增加表单和组件的事件配置
  • 增加多端预览和操作撤销和重做

安装​

 npm install @form-create/designer@next

引入​

CDN:

 <link href="https://unpkg.com/element-plus@2.0.1/dist/index.css"></link> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/element-plus@2.0.1/dist/index.full.js"></script> <!-- import @form-create/element-ui --> <script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script> <!-- import @form-create/designer --> <script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script> <div id="app"> <fc-designer height="100vh" /> </div> <script> const { createApp } = Vue const app = createApp({}); app.use(formCreate); app.use(FcDesigner); app.mount('#app'); </script>

NodeJs:

shell 
 npm install @form-create/designer@next

请自行导入ElementPlus并挂载

 import formCreate from '@form-create/element-ui' import FcDesigner from '@form-create/designer' import ELEMENT from 'element-plus'; import 'element-plus/dist/index.css'; app.use(ELEMENT); app.use(formCreate) app.use(FcDesigner)

使用​

 <fc-designer ref="designer" height="100vh" />

组件配置​

 <fc-designer ref="designer" />

 

  • locale Object

多语言配置，默认为中文

  • mask boolean

是否显示组件的遮罩，默认为true，不可以操作组件

  • height string|number

设计器组件的高度

  • menu MenuList

自定义左侧的菜单列表，会覆盖默认的菜单列表

  • config Config

可以配置设计器内模块是否显示和默认规则的修改

  • handle Handle

设计器顶部扩展操作按钮

表单回显​

获取设计器表单规则和回显

获取设计表单的数据​

 //获取表单的生成规则 const ruleJson = this.$refs.designer.getJson(); //获取表单的配置 const optionsJson = this.$refs.designer.getOptionsJson(); //todo 保存JSON数据到数据库中

回显设计表单​

 //todo 加载表单JSON规则 //回显表单 this.$refs.designer.setOptions(optionsJson); this.$refs.designer.setJson(ruleJson);

表单渲染​

挂载 form-create, 重要!

 //从设计器中导入 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/element-ui'; 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>
原文链接：https://www.oschina.net/news/295545/fcdesigner-3-1-0-released
关注公众号

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

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

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

相关文章

    文章评论

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

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章