Analyse automatisée des instances de formulaire Vue

Cet article partage avec vous la méthode de fonctionnement du formulaire automatisé Vue et la description du code associé à travers des exemples. Les amis intéressés peuvent suivre et apprendre.

Contexte

Le système côté B comporte de nombreux formulaires, et les formulaires peuvent contenir plus de champs
Les formulaires avec de nombreux champs apportent une grande quantité de Code HTML
Dans les gros blocs de HTML, la logique telle que la liaison des paramètres et le traitement des événements est mélangée, ce qui n'est pas propice à la maintenance
La pile technologique Vue et Element (disposition du formulaire par défaut) convient au développement rapide de projets de milieu et projets back-end

Goal

Plugin Vue qui génère rapidement des formulaires via la configuration json.

Objectif de conception

1. Réduire les fragments HTML répétés

2. Le composant de champ de formulaire est extensible

3. Les événements et les liens sont découplés via eventbus

4. La validation est extensible

5. La mise en page du formulaire peut être personnalisée

6. Configuration visuelle

À propos de la conception du schéma

Utilisation

Installation

npm install charlie-autoform charlie-autoform_component_lib

Code source : https://charlielau.github.io/autoform/#/component/autoform

Présentation du plug-in

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

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

Utilisation de base

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>

Effet final

Ajouter des composants personnalisés ou des répertoires de composants

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

Réalisations

Actuellement utilisé dans plusieurs systèmes

Qualitatif : Réduction des coûts de maintenance, séparation des préoccupations
Quantitatif : Efficacité de développement des formulaires augmentée de 50%

Recommandations associées :

Vue Exemple de transfert de données entre les composants parent et enfant de la classe de formulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!