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>