如何利用div做网站,二维码制作网站链接,网站维护中 源码,电子商务网站有哪些类型背景 B端系统表单较多#xff0c;且表单可能含有较多字段字段较多的表单带来了大片HTML代码在大片HTML中#xff0c;混杂着参数绑定、事件处理等逻辑#xff0c;不利于维护技术栈 Vue#xff0c;Element(默认表单布局)适合中后台项目快速开发 目标 通过json配置快速生成表单…背景 B端系统表单较多且表单可能含有较多字段字段较多的表单带来了大片HTML代码在大片HTML中混杂着参数绑定、事件处理等逻辑不利于维护技术栈 VueElement(默认表单布局)适合中后台项目快速开发 目标 通过json配置快速生成表单的vue plugin。 设计目标 减少html 重复片段表单字段组件可扩展事件、联动通过eventbus 解耦校验可扩展表单布局可自定义可视化配置 大概方案设计 使用
安装
npm install charlie-autoform charlie-autoform_component_lib使用文档: doc 请忽略文档上方的开发指南 引入插件
import AutoForm from charlie-autoform;
import AutoForm_component_lib from charlie-autoform_component_lib;Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);基本使用
demo.vue
templatedivauto-form reftagForm1 :modelmodel1 :fieldsfields1 :layoutlayoutel-form-item classclearfixel-button typeprimary立即创建/el-buttonel-button取消/el-button/el-form-item/auto-form/div
/template
scriptexport 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
templatedivdivp基本的变量可以通过mixins获取这里有开发组件需要的一些变量/pp自定义子组件Hello/pp当前field: {{field}}/pp整个model: {{model}}/pp当前model: {{model[field.name]}}/pplayout: {{layout}}/pp字段相关配置to: {{to}}/p/div/div
/templatescriptimport {baseField} from charlie-autoform;export default {mixins: [baseField],name: cHello,data () {return {};},methods: {},mounted(){//this.eventBus 事件总线}};
/script成果
目前应用再多个系统 定性 维护成本降低、关注点分离定量表单开发效率提升50% 反馈
欢迎大家来敲 github
更多专业前端知识请上
【猿2048】www.mk2048.com
