vue自定义全局指令v-emoji限制input输入表情和特殊字符

╰半夏微凉° 2024-02-21 11:50 44阅读 0赞

问题：

1.  后台不提供富文本存储，所以emoji表情入库会报错
2.  需求要求前端在输入的时候过滤掉表情符号
3.  全局的input 和富文本textarea输入框都需要过滤emoji表情

分析：

1.每一个input写事件写正则校验代码量实在太多了还很麻烦；所以想用自定义全局指令，就不需要每个用到的地方都去引入了。  
2.emoji太多了，并且输入法的emoji、mac自带的emoji 、windows自带的emoji是不一致的。全部emoji列出来一一过滤替换实在不现实，后来发现emoji表情都是2个字符的长度，其他键盘输入都是一个字符的长度。因此用字符长度来校验可行  
3.需要在输入的时候过滤掉表情符号，那么就需要在（keyup）键盘触发的时候监听触发过滤事件

js实现输入框监听方法 common/utils/emoji'

const findEle = (parent, type) => { 
      return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
    }
    const trigger = (el, type) => {  // 给元素绑定事件
      const e = document.createEvent('HTMLEvents')
      e.initEvent(type, true, true)
      el.dispatchEvent(e)
    }
    
    const emoji = {
      // el：指令所绑定的元素，可以用来直接操作 DOM。
      // vnode：Vue 编译生成的虚拟节点
      bind: function (el, binding, vnode) { // 指令第一次绑定到元素时调用
        // 判断是否是emoji图标
        const isEmoji = char => {
          // 表情都是2个字符
          return char.length > 1;
        }
    
        const emoji2empty = str => {  // emoji图标都替换成空字符串‘’
          return Array.from(str)
            .filter(c => !isEmoji(c)).join('')
        }
        let $inp = findEle(el, 'input') || findEle(el, 'textarea')  // 判断绑定元素是否是input输入框或者富文本输入框
        el.$inp = $inp 
        $inp.handle = function () {
          let val = $inp.value
          $inp.value = emoji2empty(val)  // 监听输入框的emoji图标转换成空
          trigger($inp, 'input')
        }
        $inp.addEventListener('keyup', $inp.handle)  // el添加键盘监听事件keyup
        $inp.addEventListener('blur', $inp.handle) // el添加键盘失焦事件blur
      },
      unbind: function (el) {  // 只调用一次，指令与元素解绑时调用。
        el.$inp.removeEventListener('keyup', el.$inp.handle) 
        el.$inp.removeEventListener('blur', el.$inp.handle)
      },
    }
    export default emoji

入口文件引入emoji并且全局注入指令  
Vue.directive( id, \[definition\] )  
id： 为指令唯一id  
\{Function | Object\} \[definition\] 注册的指令  
一个指令定义对象可以几个钩子函数 (均为可选)：这里使用到bind和unbind  
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。  
unbind：只调用一次，指令与元素解绑时调用。

基础用法

<el-input
      v-emoji
      v-bind="control"
      v-model="value"
      maxlength="99"
    >

import emoji from '@/utils/emoji'