传送门：Vue实现自定义指令（directive）及应用场景
背景：开发中遇到的表单输入，常常会限制特殊字符的输入 以满足安全性测试的要求。
1. 单独处理每个文本框
<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>
这样每个输入框单独处理，工作量较大且不好维护，所以需要自定义一个指令来统一实现这一需求。
2. 自定义指令全局统一处理（推荐）
2.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.2 在 main.js 中引入该自定义组件
import '@/directives/emoji.js';
2.3 在组件中使用
在需要校验的输入框（多行文本框）加上 v-emoji 即可
<el-input
v-emoji
v-model="content"
placeholder="请输入">
</el-input>
