用自定义指令的方式校验el-input不能输入特殊字符

1. 校验不能输入特殊字符，用oninput="value=value.replace(/[^\u4E00-\u9FA5A-Za-z0-9]/g,'')"不就行了吗？结果发现有bug，因为输入汉字的时候，还没有选择汉字，英文也会出发oninput事件，比如，你想输入“您好”，input框里会出来“ninhao您好”，为了解决这个问题，我想到了可以用vue的自定义指令，下面是代码。

import Vue from 'vue'
Vue.directive('inputLimSpeChar', {
    bind: function (el, binding, vnode) {
        let isInputZh = false;
        // 自定义正则表达式
        var regRule = /[^\u4E00-\u9FA5a-zA-Z0-9]/g
        el.$handle = function () {
            if(!isInputZh){
                let val = el.getElementsByTagName('input')[0].value 
                el.getElementsByTagName('input')[0].value  = val.replace(regRule, '')
                
                trigger(el, 'input')
            }
            
        }
        el.$isTrue =function (){
            isInputZh = true
        }
        el.$isFalse =function (){
            isInputZh = false
        }
        el.addEventListener("compositionstart", el.$isTrue)
        el.addEventListener("compositionend", el.$isFalse)
        el.addEventListener('keyup', el.$handle)
    },
    unbind: function (el) {
        el.removeEventListener("compositionstart", el.$isTrue)
        el.removeEventListener("compositionend", el.$isFalse)
        el.removeEventListener('keyup', el.$handle)
    },
});
const trigger = (el, type) => {
    let ev = document.createEvent('HTMLEvents');//创建HTML事件
	ev.initEvent(type,true,true);//初始化事件，type为事件类型，如input
	el.dispatchEvent(ev);//派发事件
}

3.在main.js中引入

import '@/directive/inputLimSpeChar.js'

4.使用

<el-input
 v-model="queryParams.ruleTypeName"
    placeholder="请输入"
    v-inputLimSpeChar
    clearable
></el-input>