Maison > interface Web > js tutoriel > Quels sont les moyens d'automatiser les formulaires dans Vue ?

Quels sont les moyens d'automatiser les formulaires dans Vue ?

php中世界最好的语言
Libérer: 2018-05-23 14:01:47
original
2351 Les gens l'ont consulté

Cette fois, je vais vous présenter quelques façons d'automatiser les formulaires Vue, et quelles sont les précautions pour les formulaires automatisés Vue. Voici des cas pratiques, jetons un coup d'œil.

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 de gros morceaux de HTML, la logique telle que la liaison de paramètres et le traitement d'événements sont mélangées, ce qui n'est pas propice à la maintenance
Pile technologique Vue, Element (par défaut form layout) convient au middle et backends Développement rapide de projets

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
Copier après la connexion

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);
Copier après la connexion

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: '',
   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>
Copier après la connexion

effet final

ajouté à partir de Définir le composant ou le répertoire des composants

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

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>
Copier après la connexion

Résultats

Application actuelle Plusieurs systèmes

Qualitatif : les coûts de maintenance sont réduits et les préoccupations sont séparées
Quantitatif : l'efficacité du développement des formulaires est augmentée de 50%

Je vous crois Je l'ai maîtrisé après avoir lu le cas dans cet article. Pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer les BUG et les erreurs courants dans JS

Un résumé du parent-enfant de VueJ méthodes de communication des composants

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal