自定义指令el-input 输入中文会造成响应式失效问题

为什么输入中文双向绑定效果实现

问题： 输入框需要过滤掉中文，然后使用自定义指令去实现过滤。但是在微软输入法时会出现输入中文后再输入数字时双向数据绑定失效。数据只是页面显示修改，实际变量没要修改到

解决办法： 通过compositionstart和compositionend事件设置锁定标识，在打开中文输入时设置状态，关闭时设置反状态。监听数据变化时判断状态如果是中午输入中就直接结束处理，

Vue.directive('numberOnly', {
  bind: function(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// 解决中文输入双向绑定失效
      }
      input.value = priceFormat(input.value)
      input.dispatchEvent(new Event('input'))
    }
  }
})