background

  1. There are many forms in the system at the end B, and the forms may contain many fields
  2. Forms with lots of fields lead to large chunks of HTML code
  3. In large chunks of HTML, the logic of parameter binding, event handling, and so on is mixed up and not maintainable
  4. The technology stack Vue, Element(default form layout) is suitable for rapid development of mid – to back-end projects

The target

A vue plugin that quickly generates forms through JSON configuration.

Design goals

  1. Reduce HTML repetitive fragments
  2. The form field component is extensible
  3. Event and linkage are decoupled through eventBus
  4. Check extensibility
  5. The form layout is customizable
  6. Visual configuration

General scheme design

use

The installation

npm install charlie-autoform  charlie-autoform_component_lib
Copy the code

Use documentation: doc

!!!!!!!!! Please ignore the development guide at the top of the document

The introduction of the plugin

import AutoForm from 'charlie-autoform';
import AutoForm_component_lib from 'charlie-autoform_component_lib';

Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);
Copy the code

The basic use

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, // Whether to customize the layout inline:true}, fields2: [{key:'name'.type: 'input',
            templateOptions: {
              label: 'Approver'
            }
          },
          {
            key: 'region'.type: 'select',
            templateOptions: {
              label: 'Active area',
              placeholder: 'Please select active area',
              options: [
                {
                  label: 'Zone one',
                  value: 'shanghai'
                },
                {
                  label: 'Region two',
                  value: 'beijing'}], validators:[// validators // {required:true,message:'mandatory'} / /""}}]}; }}; </script>Copy the code

The final result

Add a custom component or component directory

Vue.$autoform.RegisterDir(()=>require.context('./components/autoform'.'c')); Vue / / directory.$autoform.Register(Vue,[Components...] ,{prefix:"c"}) // Component objectCopy the code

cHello.vue

/ / PATH: / components/autoform/cHello vue < template > < div > < div > < p > the basic variables can get through it"mixins"</p> <p> Custom sub-component: Hello</p> <p> Current field: {{field}}</p> <p> Entire model: {{model}}</p> <p> Current model: {{model [field name]}} < / p > < p > layout: {{layout}} < / p > < p > field configuration related 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>Copy the code

results

More than one system is currently in use

  1. Qualitative: Maintenance cost reduction, separation of concerns
  2. Quantitative: Form development efficiency increased by 50%

feedback

Welcome to github