項(xiàng)目中使用了elementui敷待，遇到需求需要過濾下el-input中的一些特殊字符，在項(xiàng)目中多出使用，所以做成指令形式方便調(diào)用震嫉。
vue指令的幾個(gè)鉤子函數(shù)
- bind : 元素綁定時(shí)會(huì)調(diào)用并且只調(diào)用一次，進(jìn)行初始化設(shè)置
- inserted：元素插入
- update： VNode更新時(shí)調(diào)用
- componentUpdated：VNode更新之后調(diào)用
- unbind: 與元素解綁時(shí)調(diào)用并只調(diào)用一次军俊。
鉤子函數(shù)主要參數(shù)
- el：綁定的元素
- binding
- vnode ：Vue 虛擬節(jié)點(diǎn)
- oldVnode ： 僅在 update 和 componentUpdated 鉤子中可用侥加。
基本代碼實(shí)現(xiàn)：
在元素綁定時(shí)初始化設(shè)置事件監(jiān)聽，對(duì)input值進(jìn)行過濾粪躬，之后再次觸發(fā)input事件担败，更新綁定的值。
在給el-input綁定時(shí)镰官，鉤子bind中el參數(shù)：
el-binding.png
所以不能直接監(jiān)聽el提前，需要取他的child，input內(nèi)容的過濾方式可以根據(jù)需求自己定義泳唠，目前是過濾一些特殊字符岖研。
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, ''))
// })
// 派發(fā)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="請(qǐng)輸入用戶名稱" />
<input type="text" v-model="username" v-filter-special-chars placeholder="請(qǐng)輸入用戶名稱" />
