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 サイトの他の関連記事にご注目ください。

推奨読書:

vueで個人情報を表示してパスワードを変更する方法

HTMLドキュメントにJSを埋め込む方法のまとめ

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