Vue でフォームを自動化するにはどのような方法がありますか?

今回は、Vue フォームを自動化するいくつかの方法と、Vue 自動化フォームの 注意事項 について紹介します。実際の事例を見てみましょう。

背景

B 側システムには多くのフォームがあり、フォームにはより多くのフィールドが含まれる可能性があります
より多くのフィールドを持つフォームには、大きな HTML コードが含まれます
大きな HTML には、パラメーター バインディングが混在しています。 イベント処理 やその他のロジックはメンテナンスにつながりません
テクノロジー スタック Vue、Element (デフォルトのフォーム レイアウト) は、ミッドエンドおよびバックエンド プロジェクトの迅速な開発に適しています

目標

を迅速に生成する vue プラグインjson 構成によるフォーム。

設計目標

1. HTMLの繰り返しフラグメントを減らす

2. フォームフィールドコンポーネントは拡張可能です

3. イベントとリンクはイベントバスを通じて分離されます

4. 検証は拡張可能です

5. フォームのレイアウトはカスタマイズ可能です

6. ビジュアル設定

スキーム設計について

を使用して

npm install charlie-autoform charlie-autoform_component_lib

をインストールします

ソースコード: https://charlielau.github.io/autoform/#/component/autoform

プラグインを導入します

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

最終効果

コンポーネント定義またはコンポーネントディレクトリから追加

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

cHello.vue

すごい

実績

現在適用されているシステムが増えました

定性的: メンテナンスコストの削減、懸念事項の分離
定量的: フォーム開発効率が 50% 向上しました

この記事の事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

JS の一般的なバグとエラーに対処する方法

VueJs の親子コンポーネント通信方法の概要

以上がVue でフォームを自動化するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。