ホームページ >ウェブフロントエンド >jsチュートリアル >Vue による自動フォームインスタンス分析

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

不言オリジナル: 2018-05-07 14:59:491843ブラウズ

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

背景

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

目標

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

設計目標

HTMLの繰り返しフラグメントを減らす
フォームフィールドコンポーネントは拡張可能です
イベントとリンクはイベントバスを通じて分離されます
検証は拡張可能です
フォームのレイアウトはカスタマイズ可能です
ビジュアル設定

スキーム設計について

使用方法

インストール

npm install charlie-autoform charlie-autoform_component_lib

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

プラグインの紹介

import AutoForm from &#39;charlie-autoform&#39;;
import AutoForm_component_lib from &#39;charlie-autoform_component_lib&#39;;

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(&#39;./components/autoform&#39;, &#39;c&#39;));//目录
Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象

実績

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

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

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

関連記事

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