Verwenden Sie Vue, um Formulare zu automatisieren (mit Code)

Dieses Mal werde ich Ihnen die Verwendung automatisierter Vue-Formulare (mit Code) vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung automatisierter Vue-Formulare?

Hintergrund

Das B-seitige System hat viele Formulare, und die Formulare können mehr Felder enthalten.
Formulare mit vielen Feldern bringen eine große Menge an HTML-Code
In großen HTML-Blöcken sind Logik wie Parameterbindung und Ereignisverarbeitung gemischt, was der Wartung nicht förderlich ist
Technologie-Stack Vue, Element (Standard). Formularlayout) ist für das mittlere und Backend geeignet. Schnelle Projektentwicklung

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

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: '',
   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>

Endeffekt

Hinzufügen ausKomponente definierenoder Komponentenverzeichnis

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

cHello.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: 'cHello',
  data () {
   return {};
  },
  methods: {},
  mounted(){
   //this.eventBus 事件总线
  }
 };
</script>

Ergebnis

Derzeit in mehreren Systemen verwendet

Qualitativ: Wartungskosten reduziert, Trennung von Belangen
Quantitativ: Formularentwicklungseffizienz um 50 % erhöht

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Vue, um persönliche Informationen anzuzeigen und Passwörter zu ändern

Eine Zusammenfassung der Methoden zum Einbetten von JS in HTML Dokumente

Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue, um Formulare zu automatisieren (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!