场景：输入框需要过滤掉中文，然后使用自定义指令去实现过滤。但是在微软输入法时会出现输入中文后再输入数字时双向数据绑定失效。数据只是页面显示修改，实际变量没要修改到。
解决办法：通过compositionstart和compositionend事件设置锁定标识，在打开中文输入时设置状态，关闭时设置反状态。监听数据变化时判断状态如果是中午输入中就直接结束处理，
export default {
bind(el, binding, vnode) {
const input = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el;
input.addEventListener('compositionstart', () => {
vnode.locking = true//解决中文输入双向绑定失效
})
input.addEventListener('compositionend', () => {
vnode.locking = false//解决中文输入双向绑定失效
input.dispatchEvent(new Event('input'))
})
//输入监听处理
input.onkeyup = () => {
if (vnode.locking) {
return;//解决中文输入双向绑定失效
}
// 过滤逻辑 start
input.value = input.value.replace(/[^A-Za-z0-9]/g, '')
// 过滤逻辑 end
input.dispatchEvent(new Event("input"));
}
}
}
参考文档：https://blog.csdn.net/sd1sd2/article/details/127818207
