工作流

workflow开源工作流

动态表单

1. 这里的需求是可以让用户通过拖拉拽的方式设计表单

   1. 所以要用到vuedraggable依赖插件，个人认为蛮好用的

      npm i vuedraggable
      

   2. vuedraggable官方文档

   3. npm文档

2. 创建需要用到的表单域组件，例如简单的单行文本输入框el-input

3. 写一个专门放表单域组件默认配置的ItemConfig.js文件（需要什么配置自己写）

   1. 组件配置可以细分为基础组件、高级组件之类
   2. 将来页面上的组件库专门引入这里面的配置遍历渲染所有的组件名称

4. 创建ItemComponentExport.js文件，专门引入所有的表单域组件，默认导出

   1. 注意引入时要定义名字，例如

      const TextInput =()=>import("组件路径")
      export default {TextInput}
      

5. 创建一个formItemRender.vue文件，放置<component>标签动态组件

   1. 引入上面ItemComponentExport.js文件，注册
   2. 给component标签绑定is属性，指定的是ItemComponentExport.js文件中定义好的引入组件的名字，不要写死！
   3. 这时候is属性中只要是组件的名字，组件就会自动渲染出页面
   4. 具体的动态组件如何使用可以看vue官方文档

绘制流程图（还在研究中……）