背景
B端系统表单较多，且表单可能含有较多字段 字段较多的表单带来了大片HTML代码 在大片HTML中，混杂着参数绑定、事件处理等逻辑，不利于维护 技术栈 Vue，Element(默认表单布局)适合中后台项目快速开发
目标
设计目标
- 减少html 重复片段
- 表单字段组件可扩展
- 事件、联动通过eventbus 解耦
- 校验可扩展
- 表单布局可自定义
- 可视化配置
大概方案设计
使用
安装
引入插件
Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);
Vue.use(AutoForm_component_lib);
基本使用
demo.vue
最终效果
添加自定义组件或者组件目录
require.context('./components/autoform','c'));//目录
Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象
cHello.vue
基本的变量可以通过"mixins"获取，这里有开发组件需要的一些变量
自定义子组件：Hello
当前field: {{field}}
整个model: {{model}}
当前model: {{model[field.name]}}
layout: {{layout}}
字段相关配置to: {{to}}
成果
目前应用再多个系统
定性： 维护成本降低、关注点分离 定量：表单开发效率提升50%
