Vue による自動フォーム インスタンス分析

この記事では、Vue 自動化フォームの操作方法と関連コードの説明を例を通して紹介します。興味のある方はフォローして学習してください。

背景

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

目標

JSON 設定を通じてフォームを迅速に生成する Vue プラグイン。

設計目標

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

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

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

4. 検証は拡張可能です

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

6. ビジュアル設定

スキーム設計について

使用方法

インストール

npm install charlie-autoform charlie-autoform_component_lib

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

プラグインの紹介

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: &#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>

最終効果

カスタムコンポーネントまたはコンポーネントディレクトリを追加します

えー

cHello.vue

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

実績

現在複数のシステムで使用中

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

関連推奨事項:

Vue フォームクラスの親コンポーネントと子コンポーネント間のデータ転送の例

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