项目中测试提出问题，在Input输入框中输入表情后，后台会报错，于是想着在前端输入的时候禁止输入表情，或者点击win10输入法后面的表情时，禁止输入表情

在网上看到一些方法，参考地址，可以实现实现输入的时候不能输入表情，但是鼠标点击win10输入框后面的表情时，还是能输入的。

所以我对以上方法做了一点改造，实现了我想要的效果，如下图所示:

​​​​​​​

主要是对原博主的文章做了如下图所示的修改：

 完整代码是在main.js中加入一些代码，自定义一个清除表情的属性

import emojiRegex from 'emoji-regex';  // npm install emoji-regex
Vue.directive('clearEmoij', {
  bind(el, binding, vnode, oldVnode) {
    const regex = emojiRegex();
    const obj = el.querySelectorAll('.el-input__inner,.el-textarea__inner')[0];
    const zclearNoNum = function(e) {
      if (e.target.composing) return;
      const match = regex.exec(obj.value); // 也可以直接用正则表达式判断
      if (match) {
        /* for (let i=0;i<match.length;i++) {
          obj.value = obj.value.replace(match[i],"");
        }*/
        obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
        zclearNoNum(e);
      }
      // 触发v-model的更新
      obj.dispatchEvent(new Event('input'));
    }
    const zblur = function(e) {
      zclearNoNum(e);
      setTimeout(() => {
        const match = regex.exec(obj.value);
        if (match) {
          obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
          zclearNoNum(e);
        }
        // 触发v-model的更新
        obj.dispatchEvent(new Event('change'));
      }, 50)
    }
    obj.onkeyup = zclearNoNum;
    obj.onblur = zblur;


    function onCompositionStart(e) {
      e.target.composing = true
    }
    function onCompositionEnd(e) {
      console.log('按回车将字输入', e.target.value)
      e.target.composing = false
      obj.dispatchEvent(new Event('change'));
      setTimeout(() => {
        if (obj.value) {
          obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
          zclearNoNum(e);
        }
        // 触发v-model的更新
        obj.dispatchEvent(new Event('change'));
      }, 50)
    }
    obj.addEventListener('compositionstart', onCompositionStart)
    obj.addEventListener('compositionend', onCompositionEnd)
  },
  update(el, binding, vnode, oldVnode) {}
})

然后在input表情中加入自定义指令v-clear-emoij即可 

<el-input v-model.trim="temp.name" v-clear-emoij :disabled="!formable" maxlength="30"/>

如此就实现了我想要的效果。但是这种改法可能只适合比较小的项目，如果项目比较大，每一个el-input标签加过去会死人的，所以请教了一下后端大佬，这个bug就被后端大佬要走了，，，，，，说是看看能不能直接改数据库的存储类型，，，，，，，不管咋样，，，这个方法还是要记载下来的