通过vue指令过滤el-input特殊字符

项目中使用了elementui，遇到需求需要过滤下el-input中的一些特殊字符，在项目中多出使用，所以做成指令形式方便调用。

vue指令的几个钩子函数

• bind : 元素绑定时会调用并且只调用一次，进行初始化设置
• inserted：元素插入
• update： VNode更新时调用
• componentUpdated：VNode更新之后调用
• unbind: 与元素解绑时调用并只调用一次。

钩子函数主要参数

• el：绑定的元素
• binding
• vnode ：Vue 虚拟节点
• oldVnode ： 仅在 update 和 componentUpdated 钩子中可用。

基本代码实现：

在元素绑定时初始化设置事件监听，对input值进行过滤，之后再次触发input事件，更新绑定的值。
在给el-input绑定时，钩子bind中el参数：

el-binding.png

所以不能直接监听el，需要取他的child，input内容的过滤方式可以根据需求自己定义，目前是过滤一些特殊字符。

Vue.directive('filter-special-chars', {
    bind: function(el, binding, vnode) {
        const formatter = /[`~!@#_$%^&*()=|{}':;',\\[\\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？\s]/g
        let inputEl
        if (el.tagName.toLowerCase() !== 'input') {
            inputEl = el.children[0]
        } else {
            inputEl = el
        }
        // inputEl.addEventListener('blur', event => {
        //  vnode.componentInstance.$emit('input', inputEl.value.replace(formatter, ''))
        // })
        // 派发input事件
        inputEl.addEventListener('blur', event => {
            inputEl.value = inputEl.value.replace(formatter, '')
            inputEl.dispatchEvent(new Event('input'))
        })
    }
})

// 使用
 <el-input v-model="username" v-filter-special-chars placeholder="请输入用户名称" />

<input type="text" v-model="username" v-filter-special-chars placeholder="请输入用户名称" />