vue Formily动态表单解决方案

设计思路参考Formily官网~

**需求：**实现用户自定义表单结构的插件
功能：

1. 左侧可选择想要的表单组件类型；
2. 中间可进行复制、删除、拖拽顺序；
3. 右侧进行基本配置，比如输入框可限制字符数输入校验规则等，选择框可配置固定下拉选项或后端数据源选项；
4. 还有更多高级功能都可以自定义，做组件间的联动效果等就不展示了。
5. 可以进行效果预览

效果展示：

效果预览：

实现思路：
这一块真的太多代码了 几千行了
简单看下

写一个js文件存放json数据!

左侧基本组件：遍历js中的json对象

点击左侧“+”号会添加对应组件

ps: 全程使用markupSchema存放添加的组件，所有相关配置属性都存达到这个json对象中，dragList存放排序后的组件。

中间结构：遍历draglist展示，写拖拽事件、点击事件后可配置右侧属性

右侧结构：

这里在vue2中直接使用v-model存在响应式问题，所以使用:value结合change事件进行修改值。change写一个事件传入当前要修改的值。


预览表单： 也就是实际生成使用效果啦~
传入json对象，排序完根据对应component组件渲染即可