基於vue自動化表單實踐

CharlieLau發表於2019-03-04
Vue

背景

  1. B端系統表單較多，且表單可能含有較多欄位
  2. 欄位較多的表單帶來了大片HTML程式碼
  3. 在大片HTML中，混雜著引數繫結、事件處理等邏輯，不利於維護
  4. 技術棧 Vue，Element(預設表單佈局)適合中後臺專案快速開發

目標

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

設計目標

  1. 減少html 重複片段
  2. 表單欄位元件可擴充套件
  3. 事件、聯動通過eventbus 解耦
  4. 校驗可擴充套件
  5. 表單佈局可自定義
  6. 視覺化配置

大概方案設計

基於vue自動化表單實踐

使用

安裝

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

<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自動化表單實踐

新增自定義元件或者元件目錄

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>
複製程式碼

成果

目前應用再多個系統

  1. 定性： 維護成本降低、關注點分離
  2. 定量：表單開發效率提升50%

反饋

歡迎大家來敲： github

相關文章