设计思路参考Formily官网~
**需求:**实现用户自定义表单结构的插件
功能:
- 左侧可选择想要的表单组件类型;
- 中间可进行复制、删除、拖拽顺序;
- 右侧进行基本配置,比如输入框可限制字符数输入校验规则等,选择框可配置固定下拉选项或后端数据源选项;
- 还有更多高级功能都可以自定义,做组件间的联动效果等就不展示了。
- 可以进行效果预览
效果展示:
效果预览:
实现思路:
这一块真的太多代码了 几千行了
简单看下
写一个js文件存放json数据!
左侧基本组件:遍历js中的json对象
点击左侧“+”号会添加对应组件
ps: 全程使用markupSchema存放添加的组件,所有相关配置属性都存达到这个json对象中,dragList存放排序后的组件。
中间结构:遍历draglist展示,写拖拽事件、点击事件后可配置右侧属性
右侧结构:
这里在vue2中直接使用v-model存在响应式问题,所以使用:value结合change事件进行修改值。change写一个事件传入当前要修改的值。
预览表单: 也就是实际生成使用效果啦~
传入json对象,排序完根据对应component组件渲染即可