插件描述：可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。
更新时间：2021-04-11 21:56:01
form-create-designer
form-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。
安装
1 | npm install @form-create/designer |
引入
CDN:
1 2 3 4 5 6 7 8 9 10 | <!-- import Vue.js --><script src="//vuejs.org/js/vue.min.js"></script><!-- import stylesheet --><!-- import element --><!-- import form-create/element --><script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script><!-- import form-create/designer --><script src="//unpkg.com/@form-create/designer/dist/index.min.js"></script> |
NodeJs:
请自行导入ElementUI并挂载
1 2 3 4 | import formCreate from '@form-create/element-ui'import FcDesigner from '@form-create/designer'Vue.use(formCreate)Vue.use(FcDesigner) |
使用
1 | <fc-designer ref="designer"/> |
组件props
menuMenuList 重新配置拖拽的组件
heightint|string 设计器组件高度, 默认100%
组件方法
获取当前生成表单的生成规则
1 | type getRule = () => Rule[] |
示例: this.$refs.designer.getRule()
获取当前表单的全局配置
1 | type getOption = () => Object |
设置当前生成表单的规则
1 | type setRule = (rules: Rule[]) => void; |
设置当前表单的全局配置
1 | type setOption = (option: Object) => void; |
增加一组拖拽组件
1 | type addMenu = (menu: Menu) => void; |
删除一组拖拽组件
1 | type removeMenu = (name: string) => void; |
批量覆盖插入拖拽组件
1 | type setMenuItem = (name: string, items: MenuItem[]) => void; |
插入一个拖拽组件到分组
1 | type appendMenuItem = (name:string, item: MenuItem) => void; |
删除一个拖拽组件
1 | type removeMenuItem = (item: string | MenuItem) => void; |
新增一个拖拽组件的生成规则
1 | type addComponent = (item: DragRule) => void; |
提示! 内置的三个组件分组name分别为: main,aide,layout
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery bootstraps响应式公寓房地产类网站模板
- 下一个特效： 移动端app支付页面模板