這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎(chǔ)組件我就直接自己開發(fā)了。今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個表單驗證插件的過程。

1.vue插件開發(fā)

關(guān)于vue的插件開發(fā)，官方文檔里有很清晰的說明，詳情可以去閱讀開發(fā)文檔。我自己開發(fā)的表單驗證插件validate.ts和loading，messageBox插件都是利用了這種方式。今天先來看表單驗證插件的開發(fā)。

vue全局指令

// myPlugin.jsexport default { install: (Vue, options) => { // 注冊一個my-directive指令 Vue.directive('my-directive', {  bind(el, binding, vnode, oldVnode) {  // 邏輯  }  ... }) }}// main.jsimport Vue from 'vue';import myPlugin from 'myPlugin';Vue.use(myPlugin);

上面是注冊一個vue指令插件的寫法。值得注意的是注冊自定義指令的時候，bind()函數(shù)為指令的鉤子函數(shù)，其中的參數(shù)el表示指令綁定的元素，可以直接操作DOM。binding表示一個對象，包括指令名稱，綁定值等信息。vnode和oldVnode表示Vue編譯生成的虛擬節(jié)點。

我們通過注冊一個全局指令v-validateParams指令，綁定到輸入表單的input標簽上來校驗當前輸入值是否符合要求。

2.v-validateParams指令

最開始我參考了網(wǎng)上的一些代碼。基礎(chǔ)的實現(xiàn)如下：

整體框架

import Vue from 'vue'export default { install: (Vue, options) => { // 注冊一個全局自定義指令 `v-validateParams` Vue.directive('validateParams', {  // 當被綁定的元素插入到 DOM 中時  inserted: function (el, binding, vNode) {  // 給指令綁定的Dom元素添加事件監(jiān)聽，監(jiān)測輸入框失焦事件  // 每次當表單中的輸入框失焦時執(zhí)行函數(shù)  el.addEventListener('blur', function (event) {   // 1.首先重置所有錯誤提示   // 2.獲取自定義指令中傳入的校驗規(guī)則參數(shù)和表單輸入的值   // 3.依次判斷當前輸入的值是否符合校驗規(guī)則  })  } }) // 注冊一個全局自定義指令 `v-validateSubmit`，這個指令綁定到表單的提交button上 Vue.directive('validateSubmit', {  // 當被綁定的元素插入到 DOM 中時  inserted: function (el, binding, vNode) {  // 給提交button添加事件監(jiān)聽  el.addEventListener('click', function (event) {   // 獲取當前組件內(nèi)所有含有v-check類名的元素   let elements = vNode.context.$el.getElementsByClassName('v-check')   var evObj = vNode.context.$el.createEvent('Event')   evObj.initEvent('blur', true, true)   for (let element of elements) {   // 給所有v-check元素綁定blur事件   element.dispatchEvent(evObj);   }   // 獲取當前組件下的所有錯誤提示元素   let errorInputs = vNode.context.$el.getElementsByClassName('input-error');   // 如果組件中沒有錯誤提示元素，則執(zhí)行當前組件實例中的submit()函數(shù)   if(errorInputs.length === 0){   vNode.context.submit();   }  })  } }) }}