项目中使用了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="请输入用户名称" />
