Vue automatisierte Formularinstanzanalyse

Dieser Artikel teilt Ihnen die Funktionsweise des automatisierten Vue-Formulars und die zugehörige Codebeschreibung anhand von Beispielen mit. Interessierte Freunde können folgen und lernen.

Hintergrund

Das B-seitige System hat viele Formulare, und die Formulare können mehr Felder enthalten.
Formulare mit mehr Feldern bringen eine große Menge an HTML-Code
In großen HTML-Blöcken ist Logik wie Parameterbindung und Ereignisverarbeitung gemischt, was der Wartung nicht förderlich ist
Technologiestapel Vue und Element (Standardformularlayout) eignen sich für die schnelle Entwicklung von Mittel- und Back-End-Projekte

Ziel

Vue-Plugin, das durch JSON-Konfiguration schnell Formulare generiert.

Designziel

1. Wiederholte HTML-Fragmente reduzieren

2. Die Formularfeldkomponente ist erweiterbar

3. Ereignisse und Verknüpfungen werden durch Eventbus entkoppelt

4. Validierung ist erweiterbar

5. Formularlayout kann angepasst werden

6. Visuelle Konfiguration

Über das Schemadesign

Verwendung

Installation

npm install charlie-autoform charlie-autoform_component_lib

Quellcode: https://charlielau.github.io/autoform/#/component/autoform

Einführung in das Plug-in

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

Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);

Grundlegende Verwendung

demo.vue

<template>
 <p>
  <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>
 </p>
</template>
<script>
 export default {
 data() {
  return {
  model2: {
   name: &#39;&#39;,
   type: []
  },
  layout2: {
   align: &#39;left&#39;,
   labelWidth: &#39;100px&#39;,
   custom: false, //是否自定义布局
   inline: true //是否内联
  },
  fields2: [
   {
   key: &#39;name&#39;,
   type: &#39;input&#39;,
   templateOptions: {
    label: &#39;审批人&#39;
   }
   },
   {
   key: &#39;region&#39;,
   type: &#39;select&#39;,
   templateOptions: {
    label: &#39;活动区域&#39;,
    placeholder: &#39;请选择活动区域&#39;,
    options: [
    {
     label: &#39;区域一&#39;,
     value: &#39;shanghai&#39;
    },
    {
     label: &#39;区域二&#39;,
     value: &#39;beijing&#39;
    }
    ],
    validators:[ //校验
    // {required:true,message:&#39;必填&#39;}
    // ""
    ]
   }
   }
  ]
  };
 }
 };
</script>

Final Effect

Benutzerdefinierte Komponente oder Komponentenverzeichnis hinzufügen

Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目录
Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象

cHallo. vue

// PATH:/components/autoform/cHello.vue
<template>
 <p>
  <p>
   <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>
  </p>
 </p>
</template>

<script>
 import {baseField} from "charlie-autoform";
 export default {
  mixins: [baseField],
  name: &#39;cHello&#39;,
  data () {
   return {};
  },
  methods: {},
  mounted(){
   //this.eventBus 事件总线
  }
 };
</script>

Erfolge

Wird derzeit in mehreren Systemen verwendet

Qualitativ: Reduzierte Wartungskosten und Trennung von Belangen
Quantitativ: Effizienz der Formularentwicklung um 50 % erhöht

Verwandte Empfehlungen:

Beispiel für die Datenübertragung von Eltern-Kind-Komponenten of Vue-Formularklasse

Das obige ist der detaillierte Inhalt vonVue automatisierte Formularinstanzanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!