vue-form-making

开源项目vue-form-making分析

vue-form-making是基于 vue2 和 element-ui 实现的可视化表单设计器。
其分为开源版本与收费版本。本文仅分析他的开源版本。分析版本为:1.2.10

界面预览

界面结构

表单设计器界面结构.drawio.png

名称与文件路径关系

名称 对应文件路径
Container /src/components/Container.vue
WidgetConfig /src/components/WidgetConfig.vue
FormConfig /src/components/FormConfig.vue
WidgetForm /src/components/WidgetForm.vue
WidgetFormItem /src/components/WidgetFormItem.vue
GenerateForm /src/components/GenerateForm.vue
GenerateFormItem /src/components/GenerateFormItem.vue

各文件功能分析

表单设计器各文件功能.drawio.png

渲染时各文件功能

  1. 即时预览时

表单设计器即时预览时各文件功能.drawio.png

WidgetFormItem为即时预览时组件最终渲染器。

  1. 渲染时

表单设计器界面渲染时各文件功能.drawio.png

GenerateFormItem为渲染时组件最终渲染器。

渲染后数据改变流程

内部组件

表单设计器界面渲染时数据改变流程.drawio.png

  1. GenerateFormItem中组件的数据dataModel发生改变,通过update:models修改上层组件的models数据,通过input-change事件触发GenerateForm的onInputChange方法
  2. GenerateForm的onInputChange方法中通过on-change方法对外暴露组件数据改变事件

外部组件

引入GenerateForm使用value props 传入外部数据,GenerateForm与GenerateFormItem中通过props一层层向下传递，每一层通过watch监听数据