<template>
  <el-input 
    v-model="content" 
    placeholder="請輸入"
    @change="vaidateEmoji">
  </el-input>
</template>

<script> 
export default {
  methods: {
    vaidateEmoji() {
       const regRule = /[`~^!@#$€￡?%^&*()_\-+=<>?:"{}|.\/;'\\[\]·~！……@#￥￥%*（）\-+={}|《》？：“”【】‘']/im;
       this.content = this.content.replace(regRule, '');
    },
  },
}
</script>

// emoji.js
import Vue from 'vue';

// 禁止輸入特殊字符
Vue.directive('emoji', {
  bind: function (el, binding, vnode) {
    // 正則規(guī)則可根據(jù)需求自定義
    const regRule = /[`~^!@#$€￡?%^&*()_\-+=<>?:"{}|.\/;'\\[\]·~！……@#￥￥%*（）\-+={}|《》？：“”【】‘']/im;
    let $inp = findEle(el, 'input') || findEle(el, 'textarea');
    el.$inp = $inp;
    $inp.handle = function (event) {
      let val = $inp.value;
      $inp.value = val.replace(regRule, '');
      trigger($inp, 'input');
    }
    $inp.addEventListener('keyup', $inp.handle);
  },
  unbind: function (el) {
    el.$inp.removeEventListener('keyup', el.$inp.handle);
  }
});
 
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);
};

import '@/directives/emoji.js';

<el-input 
  v-emoji
  v-model="content" 
  placeholder="請輸入">
</el-input>