Практика автоматизированных форм на основе vue

JavaScript Element Vue.js Web Components

задний план

  1. В системе B-side много форм, и форма может содержать много полей.
  2. Формы с большим количеством полей содержат большие фрагменты HTML-кода.
  3. В большом фрагменте HTML логика, такая как привязка параметров и обработка событий, смешана, что не способствует обслуживанию.
  4. Стек технологий Vue, Element (макет формы по умолчанию) подходит для быстрой разработки средних и фоновых проектов

Цель

Плагин vue, который быстро генерирует формы с помощью конфигурации json.

Цели дизайна

  1. уменьшить повторяющиеся фрагменты html
  2. Компоненты поля формы являются расширяемыми
  3. События и связь разделены через шину событий
  4. Контрольная сумма расширяема
  5. Макет формы настраивается
  6. Визуальная конфигурация

Примерная схема оформления

использовать

Установить

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.$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