vue中全局限制输入特殊字符

1.新建emoji.js

import Vue from 'vue';

// 禁止输入特殊字符
Vue.directive('emoji', {
　　bind: function (el, binding, vnode) {
　　　　// 正则规则可根据需求自定义
　　　　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);
};

2.在 main.js 中引入该自定义组件

import '@/directives/emoji.js';

3.在组件中使用
在需要校验的输入框（多行文本框）加上 v-emoji 即可

<el-input v-emoji v-model="content" placeholder="请输入"> </el-input>