经过长时间的项目经验积累和测试进行提出问题的总结 发现在项目中对于输入框可以输入表情这是比较另类的 因为一般情况下不会有人对其进行输入表情包，为了解决这个问题也查询了资料 网上有很多种进行处理方式 但是感觉好多比较繁琐不够简洁，最后还是找到了感觉不错的方法进行记录分享一下

代码片段

新建文件夹 emoji.js

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 = {
  mounted(el) {
    // 指令第一次绑定到元素时调用
    // 判断是否是emoji图标
    const isEmoji = char => {
      // 表情都是2个字符
      return char.length > 1
    }
    const clearEmoji = str => {
      // emoji图标都替换成空字符串‘’
      return Array.from(str).filter(c => !isEmoji(c)).join('')
    }
    const eleInput = findEle(el, 'input') || findEle(el, 'textarea')
    // 判断绑定元素是否是input输入框或者富文本输入框
    el.$inp = eleInput
    eleInput.handle = function() {
      const val = eleInput.value
      eleInput.value = clearEmoji(val)
      // 监听输入框的emoji图标转换成空
      trigger(eleInput, 'input')
    }
    eleInput.addEventListener('keyup', eleInput.handle)
    // el添加键盘监听事件keyup
    eleInput.addEventListener('blur', eleInput.handle)
    // el添加键盘失焦事件blur
    eleInput.addEventListener('change', eleInput.handle)
    // 监听改变事件 change
  }
}

export default emoji

在新建文件夹 index.js

import emoji from './emoji'

export default function directive(app) {
  app.directive('emoji', emoji)
}

在将新建的index.js文件进行引入到main.js进行注册全局

import directive from './index.js' // directive

directive(app)

使用就和设置的指令名称一样即可 v-emoji

 <input v-emoji >
 <el-input v-emoji >

只是经验分享 有好的建议可以提出来进行更改哦