背景
B端系统表单较多，且表单可能含有较多字段
字段较多的表单带来了大片HTML代码
在大片HTML中，混杂着参数绑定、事件处理等逻辑，不利于维护
技术栈 Vue，Element(默认表单布局)适合中后台项目快速开发
目标
通过json配置快速生成表单的vue plugin。
设计目标
- 减少html 重复片段
- 表单字段组件可扩展
- 事件、联动通过eventbus 解耦
- 校验可扩展
- 表单布局可自定义
- 可视化配置
大概方案设计
使用
安装
npm install charlie-autoform charlie-autoform_component_lib
源码：https://charlielau.github.io/autoform/#/component/autoform
引入插件
import AutoForm from 'charlie-autoform';
import AutoForm_component_lib from 'charlie-autoform_component_lib';
Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);
基本使用
demo.vue
<template> <div> <auto-form ref="tagForm1" :model="model1" :fields="fields1" :layout="layout"> <el-form-item class="clearfix"> <el-button type="primary">立即创建</el-button> <el-button>取消</el-button> </el-form-item> </auto-form> </div></template><script> export default {
data() {
return {
model2: {
name: '', type: [] }
, layout2: {
align: 'left', labelWidth: '100px', custom: false, //是否自定义布局 inline: true //是否内联 }
, fields2: [ {
key: 'name', type: 'input', templateOptions: {
label: '审批人' }
}
, {
key: 'region', type: 'select', templateOptions: {
label: '活动区域', placeholder: '请选择活动区域', options: [ {
label: '区域一', value: 'shanghai' }
, {
label: '区域二', value: 'beijing' }
], validators:[ //校验 // {
required:true,message:'必填'}
// "" ] }
}
] }
;
}
}
;
</script>
最终效果
添加自定义组件或者组件目录
Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));
//目录Vue.$autoform.Register(Vue,[Components...],{
prefix: "c"}
) //组件对象
cHello.vue
// PATH:/components/autoform/cHello.vue<template> <div> <div> <p>基本的变量可以通过"mixins"获取，这里有开发组件需要的一些变量</p> <p>自定义子组件：Hello</p> <p>当前field: {
{
field}
}
</p> <p>整个model: {
{
model}
}
</p> <p>当前model: {
{
model[field.name]}
}
</p> <p>layout: {
{
layout}
}
</p> <p>字段相关配置to: {
{
to}
}
</p> </div> </div></template><script> import {
baseField}
from "charlie-autoform";
export default {
mixins: [baseField], name: 'cHello', data () {
return {
}
;
}
, methods: {
}
, mounted(){
//this.eventBus 事件总线 }
}
;
</script>
成果
目前应用再多个系统
定性： 维护成本降低、关注点分离
定量：表单开发效率提升50%
源码：https://github.com/CharlieLau/autoform
您可能感兴趣的文章:
- Vue表单类的父子组件数据传递示例
- 使用Vue动态生成form表单的实例代码
- 详解vue表单——小白速看
- Vue.js 表单控件操作小结
- Vue.js实现可配置的登录表单代码详解
- vue axios 表单提交上传图片的实例
- Vue.js自定义事件的表单输入组件方法
- Vue+ElementUI实现表单动态渲染、可视化配置的方法
- vue中动态绑定表单元素的属性方法
- Vue 表单控件绑定的实现示例
