實現要求

模仿 ElementUI 的表單，分為四層結構：index 組件、Form 表單組件、FormItem 表單項組件、Input 和 CheckBox 組件，具體分工如下：

index 組件：

實現：分別引入 Form 組件、FormItem 組件、Input 組件，實現組裝；

Form 表單組件：

實現：預留插槽、管理數據模型 model、自定義校驗規則 rules、全局校驗方法 validate；

FormItem 表單項組件：

實現：預留插槽、顯示 label 標簽、執行數據校驗、顯示校驗結果；

Input 和 CheckBox 組件：

實現：綁定數據模型 v-model、通知 FormItem 組件執行校驗；Input 組件

具體實現如下：

1、自定義組件要實現 v-model 必須實現 :value 和 @input。

2、當輸入框中的數據發生變化時，通知父組件執行校驗。

3、當 Input 組件綁定的 type 類型為 password 時，在組件內部使用 v-bind='$attrs' 獲取 props 之外的內容。

4、設置 inheritAttrs 為 false, 從而避免頂層容器繼承屬性。

Input 組件實現：

<template> <div> <input :value='value' @input='onInput' v-bind='$attrs' /> </div></template><script>export default { inheritAttrs: false, // 避免頂層容器繼承屬性 props: { value: { type: String, default: '' } }, data() { return {}; }, methods: { onInput(e) { // 通知父組件數值發生變化 this.$emit('input', e.target.value); // 通知 FormItem 執行校驗 // 這種寫法不健壯，因為 Input 組件和 FormItem 組件之間可能會隔代 this.$parent.$emit('validate'); } }};</script><style scoped></style>

注意：代碼中使用 this.$parent 派發事件，這種寫法不健壯，當 Input 組件和 FormItem 組件之間隔代時會出現問題。具體解決方式見文章尾部代碼優化部分。

CheckBox 組件

1、自定義實現 checkBox 的雙向數據綁定，和 input 大同小異，必須實現 :checked 和 @change。

CheckBox 組件實現：

<template> <section> <input type='checkbox' :checked='checked' @change='onChange' /> </section></template><script>export default { props: { checked: { type: Boolean, default: false } }, model: { prop: 'checked', event: 'change' }, methods: { onChange(e) { this.$emit('change', e.target.checked); this.$parent.$emit('validate'); } }};</script><style scoped lang='less'></style>FormItem 組件

具體實現如下：

1、給 Input 組件或者 CheckBox 組件預留插槽。

2、如果用戶在組件上設置 label 屬性，要展示 label 標簽。

3、監聽校驗事件，并執行校驗（使用 async-validator 插件進行校驗）。

4、如果不符合校驗規則，需要顯示校驗結果。

在開發的過程中，我們需要思考幾個問題：

1、在組件內部，如何得到需要校驗的數據和校驗規則？

2、在 Form 表單中會有多個菜單項，如：用戶名、密碼、郵箱...等等，那么 FormItem 組件是如何得知現在校驗的是哪個菜單呢？

FormItem 組件實現：

<template> <div class='formItem-wrapper'> <div class='content'> <label v-if='label' :style='{ width: labelWidth }'>{{ label }}：</label> <slot></slot> </div> <p v-if='errorMessage' class='errorStyle'>{{ errorMessage }}</p> </div></template><script>import Schema from 'async-validator';export default { inject: ['formModel'], props: { label: { type: String, default: '' }, prop: String }, data() { return { errorMessage: '', labelWidth: this.formModel.labelWidth }; }, mounted() { // 監聽校驗事件，并執行校驗 this.$on('validate', () => { this.validate(); }); }, methods: { validate() { // 執行組件的校驗 // 1、獲取數據 const values = this.formModel.model[this.prop]; // 2、獲取校驗規則 const rules = this.formModel.rules[this.prop]; // 3、執行校驗 const schema = new Schema({ [this.prop]: rules }); // 參數1是值，餐數2是校驗錯誤對象數組 // validate 返回的是 Promise<Boolean> return schema.validate({ [this.prop]: values }, errors => { if (errors) { this.errorMessage = errors[0].message; } else { this.errorMessage = ''; } }); } }};</script><style scoped lang='less'>@labelWidth: 90px;.formItem-wrapper { padding-bottom: 10px;}.content { display: flex;}.errorStyle { font-size: 12px; color: red; margin: 0; padding-left: @labelWidth;}</style>

我們先回答一下上面提出的兩個問題，此處會涉及到組件之間傳值，可以參考之前的文章《組件傳值、通訊》：首先表單的數據和校驗規則是定義在 index 組件內部，并且掛載在 Form 組件上，表單的校驗項發生在 FormItem 組件中，先在 Form 組件內部通過 props 接受到傳遞的數據，然后通過 provide/inject 的方式在 FormItem 組件中傳遞給后代組件。

我們日常在用 ElementUI 的表單校驗是會發現，在每一個需要校驗的表單上會設置一個 prop 屬性，并且屬性值和綁定的數據一致。此處的用途是為了能夠在 FormItem 組件中執行校驗時獲取相對的校驗規則和數據對象。

在 FormItem 組件中通過使用 inject 獲取注入的 Form 實例，和 prop 屬性組合使用，可以獲取到表單數據和校驗規則。

// 1、獲取數據const values = this.formModel.model[this.prop];// 2、獲取校驗規則const rules = this.formModel.rules[this.prop];

使用 async-validator 插件實例化一個 schema 對象，用來執行校驗，schema.validate 需要傳遞兩個參數，參數1是當前需要校驗的字段和相對應的 rules 組成的鍵值對對象，參數2是一個 callback 函數，用來獲取錯誤信息（是一個數組）。validate 方法返回的是一個 Promise<Boolean>。

注意：此組件的 validate 方法中，最后使用 return 的目的是為了在 Form 組件中執行全局校驗使用。

Form 組件

具體實現如下：

1、給 FormItem 組件預留插槽。

2、傳遞 Form 實例給后代，比如 FormItem 用來獲取校驗的數據和規則。

3、執行全局校驗

Form 組件實現：

<template> <div> <slot></slot> </div></template><script>export default { provide() { return { formModel: this // 傳遞 Form 實例給后代，比如 FormItem 用來獲取校驗的數據和規則 }; }, props: { model: { type: Object, required: true }, rules: { type: Object }, labelWidth: String }, data() { return {}; }, methods: { validate(cb) { // 執行全局校驗 // map 結果是若干 Promise 數組 const tasks = this.$children.filter(item => item.prop).map(item => item.validate()); // 所有任務必須全部校驗成功才算校驗通過 Promise.all(tasks) .then(() => { cb(true); }) .catch(() => { cb(false); }); } }};</script><style scoped></style>

我們在 Form 組件中使用 provide 注入當前組件對象，方便后續子孫代獲取數據/方法使用。

執行全局校驗的時候，先使用 filter 過濾掉不需要校驗的組件（我們在 FormItem 組件上設置的 prop 屬性，只要有此屬性，就是需要校驗的），然后分別執行組件中的 validate 方法（如果在 FormItem 組件中不使用 return 數據，最后獲取到的全都是 undefined），返回的是一個若干 Promise 數組。

簡單介紹一個 Promise.all() 方法：

Promise.all() 方法接收一個promise的iterable類型（注：Array，Map，Set都屬于ES6的iterable類型）的輸入，并且只返回一個Promise實例， 那個輸入的所有promise的resolve回調的結果是一個數組。這個Promise的resolve回調執行是在所有輸入的promise的resolve回調都結束，或者輸入的iterable里沒有promise了的時候。它的reject回調執行是，只要任何一個輸入的promise的reject回調執行或者輸入不合法的promise就會立即拋出錯誤，并且reject的是第一個拋出的錯誤信息。

index 組件

定義模型數據、校驗規則等等，分別引入 Form 組件、FormItem 組件、Input 組件，實現組裝。

index 組件實現：

<template> <div> <Form :model='formModel' :rules='rules' ref='loginForm' label-width='90px'> <FormItem label='用戶名' prop='username'> <Input v-model='formModel.username'></Input> </FormItem> <FormItem label='密碼' prop='password'> <Input type='password' v-model='formModel.password'></Input> </FormItem> <FormItem label='記住密碼' prop='remember'> <CheckBox v-model='formModel.remember'></CheckBox> </FormItem> <FormItem> <button @click='onLogin'>登錄</button> </FormItem> </Form> </div></template><script>import Input from '@/components/form/Input';import CheckBox from ’@/components/form/CheckBox’import FormItem from '@/components/form/FormItem';import Form from '@/components/form/Form';export default { data() { const validateName = (rule, value, callback) => { if (!value) { callback(new Error('用戶名不能為空')); } else if (value !== 'admin') { callback(new Error('用戶名錯誤 - admin')); } else { callback(); } }; const validatePass = (rule, value, callback) => { if (!value) { callback(false); } else { callback(); } }; return { formModel: { username: '', password: '', remember: false }, rules: { username: [{ required: true, validator: validateName }], password: [{ required: true, message: '密碼必填' }], remember: [{ required: true, message: '記住密碼必選', validator: validatePass }] } }; }, methods: { onLogin() { this.$refs.loginForm.validate(isValid => { if (isValid) { alert('登錄成功'); } else { alert('登錄失敗'); } }); } }, components: { Input, CheckBox, FormItem, Form }};</script><style scoped></style>

當我們點擊登錄按鈕時，會執行全局校驗方法，我們可以使用 this.$refs.xxx 獲取 DOM 元素和組件實例。

在上面我們還留了一個小尾巴~，就是在 Input 組件中通知父組件執行校驗，目前使用的是 this.$parent.$emit()，這樣寫有一個弊端，就是當 Input 組件和 FormItem 組件之后隔代的時候，再使用 this.$parent 獲取不到 FormItem 組件。我們可以封裝一個 dispatch 方法，主要實現向上循環查找父元素并且派發事件，代碼實現如下：

dispatch(eventName, data) { let parent = this.$parent; // 查找父元素 while (parent) { // 父元素用$emit觸發 parent.$emit(eventName, data); // 遞歸查找父元素 parent = parent.$parent; }}

該方法可以借用 mixins 引入使用：mixins/emmiters.js

export default { methods: { dispatch(eventName, data) { let parent = this.$parent; // 查找父元素 while (parent) { // 父元素用$emit觸發 parent.$emit(eventName, data); // 遞歸查找父元素 parent = parent.$parent; } } }};

修改 Input 組件：

<template> <div> <input :value='value' @input='onInput' v-bind='$attrs' /> </div></template><script>import emmiter from '@/mixins/emmiter';export default { inheritAttrs: false, // 避免頂層容器繼承屬性 mixins: [emmiter], props: { value: { type: String, default: '' } }, data() { return {}; }, methods: { onInput(e) { // 通知父組件數值發生變化 this.$emit('input', e.target.value); // 通知 FormItem 執行校驗 // 這種寫法不健壯，因為 Input 組件和 FormItem 組件之間可能會隔代 // this.$parent.$emit('validate'); this.dispatch('validate'); // 使用 mixin 中 emmiter 的 dispatch，解決跨級問題 } }};</script><style scoped></style>總結

到此這篇關于Vue模仿ElementUI的form表單的文章就介紹到這了,更多相關Vue模仿ElementUI form表單內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！