Vue用递归实现一个消除输入框表情符的自定义directive

最近项目中有一个需求，所有的文本输入框需要过滤掉表情符号，但是觉得每次表单验证的时候去判断，有点麻烦。于是我想到了自定义一个指令，后续遇到需要删除表情符号的输入框，直接通过指令将表情符号删除就好了，方便快捷！

一、首先看看Vue自定义指令文档

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

二、在项目的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')
  },
})

三、组件中使用指令后，input框中的表情符号会实时删除：

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

 四、注意点：

　　这个指令只支持原生的dom，对于el-input这样的UI组件标签失效，因为自定义指令没有办法改变el-input标签的dom

转载于:https://www.cnblogs.com/angelatian/p/11091004.html