Vue用遞歸實現一個消除輸入框表情符的自定義directive

最近項目中有一個需求，全部的文本輸入框須要過濾掉表情符號，可是以爲每次表單驗證的時候去判斷，有點麻煩。因而我想到了自定義一個指令，後續遇到須要刪除表情符號的輸入框，直接經過指令將表情符號刪除就行了，方便快捷！

1、首先看看Vue自定義指令文檔

https://cn.vuejs.org/v2/guide/custom-directive.html

2、在項目的directive中自定義一個指令：noEmoji 

　　這裏須要用到的是對傳入的binding的參數進行dom操做，將組件中的vue實例傳入，改變vue實例中data的值

import Vue from 'vue';
import { Message } from 'element-ui'

// 過濾輸入框表情
Vue.directive('noEmoji', {
  bind: function (el) {
    console.log(el, 'bind')
  },
  inserted: function (el) {
    console.log(el, 'inserted')
  },
  update: function clearEmoji(el, binding, vnode, oldVnode) {
    let emojiRegex = require('emoji-regex')
    let regex = emojiRegex()
    let match = regex.exec(el.value)
    if(match) {
      Message('此輸入框不支持表情')
      el.value = el.value.replace(match[0], "")
      if (binding && binding.value) {
        let vm = binding.value.vm
        let attr = binding.value.attr
        let length = attr.length
        switch (length) {
          case 1:
            vm.$set(vm, attr[0], el.value);
            break;
          case 2:
            vm.$set(vm[attr[0]], attr[1], el.value);
            break;
          default:
            return false
        }
      }
      clearEmoji(el)
    }
  },
  componentUpdated: function(el, binding, vnode, oldVnode) {
    console.log(el, 'componentUpdated')
  },
  unbind: function(el, binding, vnode, oldVnode) {
    console.log(el, 'unbind')
  },
})

3、組件中使用指令後，input框中的表情符號會實時刪除：

<input v-model="addForm.name" class="el-input__inner"  v-noEmoji="{vm : this, attr: ['addForm','name']}" placeholder="表單名稱" />

 4、注意點：

　　這個指令只支持原生的dom，對於el-input這樣的UI組件標籤失效，由於自定義指令沒有辦法改變el-input標籤的dom