vue自動(dòng)化表單實(shí)例分析

2019-11-19 13:54:32

字體：大中小

供稿：網(wǎng)友

背景

B端系統(tǒng)表單較多，且表單可能含有較多字段
字段較多的表單帶來了大片HTML代碼
在大片HTML中，混雜著參數(shù)綁定、事件處理等邏輯，不利于維護(hù)
技術(shù)棧 Vue，Element(默認(rèn)表單布局)適合中后臺(tái)項(xiàng)目快速開發(fā)

目標(biāo)

通過json配置快速生成表單的vue plugin。

設(shè)計(jì)目標(biāo)

減少html 重復(fù)片段
表單字段組件可擴(kuò)展
事件、聯(lián)動(dòng)通過eventbus 解耦
校驗(yàn)可擴(kuò)展
表單布局可自定義
可視化配置

大概方案設(shè)計(jì)

使用

安裝

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">立即創(chuàng)建</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 //是否內(nèi)聯(lián)  },  fields2: [   {   key: 'name',   type: 'input',   templateOptions: {    label: '審批人'   }   },   {   key: 'region',   type: 'select',   templateOptions: {    label: '活動(dòng)區(qū)域',    placeholder: '請(qǐng)選擇活動(dòng)區(qū)域',    options: [    {     label: '區(qū)域一',     value: 'shanghai'    },    {     label: '區(qū)域二',     value: 'beijing'    }    ],    validators:[ //校驗(yàn)    // {required:true,message:'必填'}    // ""    ]   }   }  ]  }; } };</script>

最終效果

添加自定義組件或者組件目錄

Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目錄Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //組件對(duì)象

cHello.vue

// PATH:/components/autoform/cHello.vue<template> <div>  <div>   <p>基本的變量可以通過"mixins"獲取，這里有開發(fā)組件需要的一些變量</p>   <p>自定義子組件：Hello</p>   <p>當(dāng)前field: {{field}}</p>   <p>整個(gè)model: {{model}}</p>   <p>當(dāng)前model: {{model[field.name]}}</p>   <p>layout: {{layout}}</p>   <p>字段相關(guān)配置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>

成果

目前應(yīng)用再多個(gè)系統(tǒng)