手把手教你用Vue.js封裝Form組件

時間 2019-12-19

標籤手把手 vue.js vue 封裝 form 組件欄目 JavaScript 简体版

原文原文鏈接

前言：html

在平常使用vue開發WEB項目中，常常會有提交表單的需求。咱們能夠使用 iview 或者 element 等組件庫來完成相關需求；但咱們每每忽略了其中的實現邏輯，若是想深刻了解其中的實現細節，本文章從0到1，手把手教你封裝一個屬於本身的Form組件! 實例代碼 github.com/zhengjunxia…vue

Form 組件概覽

表單類組件有多種，好比輸入框（Input）、單選（Radio）、多選（Checkbox）等。在使用表單時，也會常常用到數據校驗，若是每次都寫校驗程序來對每個表單的輸入值進行校驗，會很低效，所以須要一個可以校驗基礎表單控件的組件，也就是本節要完成的Form 組件。 Form 組件分爲兩個部分，一個是外層的Form 表單域組件，一組表單控件只有一個Form，而內部包含了多個FormItem 組件，每個表單控件都被一個FormItem 包裹。基本的結構看起來像：git

<!-- ./src/views/Form.vue -->
<iForm ref="form" :model="formData" :rules="rules">
   <iFormItem label="名稱：" prop="name">
       <iInput v-model="formData.name" ></iInput>
   </iFormItem>
   <iFormItem label="郵箱：" prop="mail">
       <iInput v-model="formData.mail"></iInput>
   </iFormItem>
   <button @click="handleSubmit">提交</button>
   <button @click="handleReset">重置</button>
</iForm>
複製代碼

Form 須要有輸入校驗，並在對應的 FormItem 中給出校驗提示，校驗咱們會用到一個開源庫：async-validator。使用規則大概以下：github

[
  { required: true, message: '不能爲空', trigger: 'blur' },
  { type: 'email', message: '格式不正確', trigger: 'blur' }
]
複製代碼

required表示必填項，message表示校驗失敗時的提示信息，trigger表示觸發校驗的條件，它的值有blur和change表示失去焦點和正在輸入時進行校驗。若是第一條知足要求，再進行第二條的驗證，type表示校驗類型，值爲email表示校驗輸入值爲郵箱格式，還支持自定義校驗規則。更詳細的用法能夠參看它的文檔。數組

初始化項目

使用 Vue CLI 3 建立項目（具體使用能夠查看官方文檔）,同時下載 async-validator 庫。緩存

初始化項目完項目後，在 src/components 下新建一個form 文件夾，並初始化兩個組件 form.vue 和 formItem.vue和一個input.vue，同時能夠按照本身的想法配置路由。初始完項目後src下的項目錄以下：bash

./src
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── form
│   │   ├── form.vue
│   │   └── formItem.vue
│   └── input.vue
├── main.js
├── mixins
│   └── emitter.js
├── router.js
└── views
    └── Form.vue
複製代碼

接口實現

組件的接口來自三個部分：props、slots、events。Form 和FormItem 兩個組件用來作輸入數據校驗，用不到 events。Form的 slot 就是一系列的 FormItem，FormItem 的 slot 就是具體的表單如: <iInput> 。app

在 Form 組件中，定義兩個 props：iview

model：表單控件綁定的數據對象，在校驗或重置時會訪問該數據對象對應數據，類型爲Object。
rules：表單校驗規則，即上面介紹的 async-validator 所使用的校驗規則，類型爲Object。

在FormItem 組件中，也定義兩個props：async

label：單個表單組件的標籤文本，相似原生的 <label>元素，類型爲String。
prop：對應表單域Form 組件model 裏的字段，用於在校驗或重置時訪問表單組件綁定的數據，類型爲String。

定義完後，調用頁面的代碼以下：

<template>
  <div class="home">
    <h3>Form (校驗表單)</h3>
    <iForm ref="form" :model="formData" :rules="rules">
      <iFormItem label="名稱：" prop="name">
        <iInput v-model="formData.name"></iInput>
      </iFormItem>
      <iFormItem label="郵箱：" prop="mail">
        <iInput v-model="formData.mail"></iInput>
      </iFormItem>
    </iForm>
  </div>
</template>

<script>
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'

export default {
  name: 'home',
  components: { iForm, iFormItem, iInput },
  data() {
    return {
      formData: { name: '', mail: '' },
      rules: {
        name: [{ required: true, message: '不能爲空', trigger: 'blur'}],
        mail: [
          { required: true, message: '不能爲空', trigger: 'blur'},
          { type: 'email', message: '郵箱格式不正確', trigger: 'blur'}
        ]
      }
    }
  }
}
</script>
複製代碼

代碼中的 iForm 、iFormItem 和 iInput組件的實現細節將在後邊的內容涉及。

到此，iForm 和 iFormItem 組件的代碼以下：

<!-- ./src/components/form/form.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'iForm',
  data() {
    return { fields: [] }
  },
  props: {
    model: { type: Object },
    rules: { type: Object }
  },
  created() {
    this.$on('form-add', field => {
      if (field) this.fields.push(field);
    });
    this.$on('form-remove', field => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
    })
  }
}
</script>
複製代碼

<!-- ./src/components/form/formItem.vue -->
<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'iFormItem',
  props: {
    label: { type: String, default: '' },
    prop: { type: String }
  }
}
</script>
複製代碼

在 iForm 組件中設置了 fields 數組來保存組件中的表單實例，方便接下來獲取表單實例來判斷各個表單的校驗狀況; 並在 created 生命週期中就綁定兩個監聽事件 form-add 和 form-remove 用於添加和移除表單實例。

接下來就是實現剛纔提到綁定事件，但在實現以前咱們要設想下，咱們要怎麼調用綁定事件這個方法？在 Vue.js 1.x 版本，有this.$dispatch 方法來綁定自定義事件，但在 Vue.js 2.x 裏廢棄了。但咱們能夠實現一個相似的方法，調用方式爲 this.dispatch 少了 $ 來於以前的舊 API 作區分。咱們能夠把該方法單獨寫到 emitter.js 文件中，而後經過組件中的 mixins 方式引用，達到代碼複用。在 src 中建立文件夾 mixins 而後在其中建立 emitter.js，具體代碼以下：

<!-- ./src/mixins/emitter.js -->
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) name = parent.$options.name;
      }
      if (parent) parent.$emit.apply(parent, [eventName].concat(params));
    }
  }
}
複製代碼

能夠看到該 dispatch 方法經過遍歷組件的 $parent.name 來和傳入的參數 componentName 作對比，當找到目標父組件時就經過調用父組件的 $emit 來觸發參數 eventName 對應的綁定事件。

接下來在 formItem.vue 中經過 mixins 引入 dispatch 方法，實現觸發綁定事件 form-add 和 form-remove, 代碼以下：

<!-- ./src/components/form/formItem.vue -->
<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <slot></slot>
  </div>
</template>
<script>
import Emitter from '@/mixins/emitter.js';
export default {
  name: 'iFormItem',
  mixins: [ Emitter ],
  props: {
    label: { type: String, default: '' },
    prop: { type: String }
  },
  mounted() {
    if (this.prop) {
      this.dispatch('iForm', 'form-add', this);
    }
  },
  // 組件銷燬前，將實例從 Form 的緩存中移除
  beforeDestroy () {
    this.dispatch('iForm', 'form-remove', this);
  },
}
</script>
複製代碼

接下來是實現 formItem.vue 的輸入數據校驗功能，在校驗是首先須要知道校驗的規則，因此咱們先要拿到 Form.vue 中的 rules 對象。

在 Form.vue 中 rules 對象經過 props 傳給 iForm 組件，那麼咱們能夠在 iForm 組件中經過 provide 的方式導出該組件實例，讓子組件能夠獲取到其 props 中的 rules 對象；
子組件 formItem 能夠經過 inject 的方式注入須要訪問的實例；

此時代碼以下：

<!-- ./src/components/form/form.vue -->
...
export default {
  name: 'iForm',
  data() {
    return { fields: [] }
  },
  props: {
    model: { type: Object },
    rules: { type: Object }
  },
  provide() {
    return { form: this }
  },
  created() {
    this.$on('form-add', field => {
      if (field) this.fields.push(field);
    });
    this.$on('form-remove', field => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
    })
  }
}
</script>
複製代碼

<!-- ./src/components/form/formItem.vue -->
...
import Emitter from '@/mixins/emitter.js';
export default {
  name: 'iFormItem',
  mixins: [ Emitter ],
  inject: [ 'form' ],
  props: {
    label: { type: String, default: '' },
    prop: { type: String }
  },
  mounted() {
    if (this.prop) {
      this.dispatch('iForm', 'form-add', this);
    }
  },
  // 組件銷燬前，將實例從 Form 的緩存中移除
  beforeDestroy () {
    this.dispatch('iForm', 'form-remove', this);
  },
}
</script>
複製代碼

如今在 formItem 中就能夠經過 this.form.rules 來獲取到規則對象了；有了規則對象之後，就能夠設置具體的校驗方法了；

setRules：設置具體須要監聽的事件，並觸發校驗；
getRules：獲取該表單對應的校驗規則；
getFilteredRule：過濾出符合要求的 rule 規則；
validate：具體的校驗過程； ...

具體代碼以下：

<!-- ./src/components/form/formItem.vue -->
<template>
  <div>
    <label :for="labelFor" v-if="label" :class="{'label-required': isRequired}">{{label}}</label>
    <slot></slot>
    <div v-if="isShowMes" class="message">{{message}}</div>
  </div>
</template>
<script>
import AsyncValidator from 'async-validator';
import Emitter from '@/mixins/emitter.js';
export default {
  name: 'iFormItem',
  mixins: [ Emitter ],
  inject: [ 'form' ],
  props: {
    label: { type: String, default: '' },
    prop: { type: String }
  },
  data() {
    return {
      isRequired: false, isShowMes: false, message: '', labelFor: 'input' + new Date().valueOf()
    }
  },
  mounted() {
    if (this.prop) {
      this.dispatch('iForm', 'form-add', this);
      // 設置初始值
      this.initialValue = this.fieldValue;
      this.setRules();
    }
  },
  // 組件銷燬前，將實例從 Form 的緩存中移除
  beforeDestroy () {
    this.dispatch('iForm', 'form-remove', this);
  },
  computed: {
    fieldValue() {
      return this.form.model[this.prop]
    }
  },
  methods: {
    setRules() {
      let rules = this.getRules();
      if (rules.length) {
        rules.forEach(rule => {
          if (rule.required !== undefined) this.isRequired = rule.required
        });
      }
      this.$on('form-blur', this.onFieldBlur);
      this.$on('form-change', this.onFieldChange);
    },
    getRules() {
      let formRules = this.form.rules;
      formRules = formRules ? formRules[this.prop] : [];
      return formRules;
    },
    // 過濾出符合要求的 rule 規則
    getFilteredRule (trigger) {
      const rules = this.getRules();
      return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
    },
    /**
     * 校驗表單數據
     * @param trigger 觸發校驗類型
     * @param callback 回調函數
     */
    validate(trigger, cb) {
      let rules = this.getFilteredRule(trigger);
      if(!rules || rules.length === 0) return true;
      // 使用 async-validator
      const validator = new AsyncValidator({ [this.prop]: rules });
      let model = {[this.prop]: this.fieldValue}; 
      validator.validate(model, { firstFields: true }, errors => {
        this.isShowMes = errors ? true : false;
        this.message = errors ? errors[0].message : '';
        if (cb) cb(this.message);
      })
    },
    resetField () {
      this.message = '';
      this.form.model[this.prop] = this.initialValue;
    },
    onFieldBlur() {
      this.validate('blur');
    },
    onFieldChange() {
      this.validate('change');
    }
  }
}
</script>
<style>
  .label-required:before {
    content: '*';
    color: red;
  }
  .message {
    font-size: 12px;
    color: red;
  }
</style>
複製代碼

注意：此次除了增長了具體的校驗方法外，還有錯誤提示信息的顯示邏輯 <label> 標籤的 for 屬性設置；到此，formItem 組件完成。

有了 formItem 組件咱們就能夠用它了包裹 input 組件：

在 input 組件中經過 @input 和 @blur 這兩個事件來觸發 formItem 組件的 form-change 和 form-blur 的監聽方法。須要特別注意：在 handleInput 中須要調用 this.$emit('input', value) ，把 input 中輸入的 value 傳給在實例調用頁面中的 formData ，代碼以下：

<!-- ./src/views/Form.vue -->
// 省略部分代碼
<template>
  <div class="home">
    <h3>Form (校驗表單)</h3>
    <iForm ref="form" :model="formData" :rules="rules">
      <iFormItem label="名稱：" prop="name">
        <iInput v-model="formData.name"></iInput>
      </iFormItem>
      <iFormItem label="郵箱：" prop="mail">
        <iInput v-model="formData.mail"></iInput>
      </iFormItem>
    </iForm>
  </div>
</template>

<script>
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'
// formData中的數據經過v-model的方試進行綁定，
// 在 input 組件中調用 this.$emit('input', value) 把數據傳給 formData
export default {
  name: 'home',
  components: { iForm, iFormItem, iInput },
  data() {
    return {
      formData: { name: '', mail: '' }
    }
  }
}
</script>
複製代碼

並在組件中 watch 其輸入的 value 值，賦值給 input 組件；

實現代碼以下：

<!-- ./src/components/input.vue -->
<template>
  <div>
    <input ref="input" :type="type" :value="currentValue" @input="handleInput" @blur="handleBlur" />
  </div>
</template>
<script>
import Emitter from '@/mixins/emitter.js';
export default {
  name: 'iInput',
  mixins: [ Emitter ],
  props: {
    type: { type: String, default: 'text'},
    value: { type: String, default: ''}
  },
  watch: {
    value(value) {
      this.currentValue = value
    }
  },
  data() {
    return { currentValue: this.value, id: this.label }
  },
  mounted () {
    if (this.$parent.labelFor) this.$refs.input.id = this.$parent.labelFor;
  },
  methods: {
    handleInput(e) {
      const value = e.target.value;
      this.currentValue = value;
      this.$emit('input', value);
      this.dispatch('iFormItem', 'form-change', value);
    },
    handleBlur() {
      this.dispatch('iFormItem', 'form-blur', this.currentValue);
    }
  }
}
</script>
複製代碼

input 組件到此就完成，如今咱們能夠接着在 form 組件實現表單提交時，校驗全部表單，和重置所用表單的功能了：

<!-- ./src/components/form/form.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'iForm',
  data() {
    return { fields: [] }
  },
  props: {
    model: { type: Object },
    rules: { type: Object }
  },
  provide() {
    return { form: this }
  },
  methods: {
    resetFields() {
      this.fields.forEach(field => field.resetField())
    },
    validate(cb) {
      return new Promise(resolve => {
        let valid = true, count = 0;
        this.fields.forEach(field => {
          field.validate('', error => {
            if (error) valid = false;
            if (++count === this.fields.length) {
              resolve(valid);
              if (typeof cb === 'function') cb(valid);
            }
          })
        })
      })
    }
  },
  created() {
    this.$on('form-add', field => {
      if (field) this.fields.push(field);
    });
    this.$on('form-remove', field => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
    })
  }
}
</script>
複製代碼

validate: 獲取全部表單的校驗結果，並作對應邏輯處理；
resetFields: 重置全部表單；

如今讓咱們回到最初的調用頁面 ./src/views/Form.vue 下，添加兩個按鈕，分別用於提交表單和重置表單：

<!-- ./src/views/Form.vue -->
<template>
  <div class="home">
    <h3>Form (校驗表單)</h3>
    <iForm ref="form" :model="formData" :rules="rules">
      <iFormItem label="名稱：" prop="name">
        <iInput v-model="formData.name"></iInput>
      </iFormItem>
      <iFormItem label="郵箱：" prop="mail">
        <iInput v-model="formData.mail"></iInput>
      </iFormItem>
      <button @click="handleSubmit">提交</button>
      <button @click="handleReset">重置</button>
    </iForm>
  </div>
</template>

<script>
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'

export default {
  name: 'home',
  components: { iForm, iFormItem, iInput },
  data() {
    return {
      formData: { name: '', mail: '' },
      rules: {
        name: [{ required: true, message: '不能爲空', trigger: 'blur'}],
        mail: [
          { required: true, message: '不能爲空', trigger: 'blur'},
          { type: 'email', message: '郵箱格式不正確', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid)  console.log('提交成功');
        else console.log('校驗失敗');
      })
    },
    handleReset() { this.$refs.form.resetFields() }
  }
}
</script>
複製代碼