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')

  },

})