退步青年

反向进步

首页 归档 标签 关于

vue directive 控制输入框只能输入数字类型

2022-05-27 1 min read 
export default {
  install(Vue) {
    Vue.directive('is-number', {
      bind(el, binding, vnode) {
        let input = el.getElementsByTagName('input')
        input[0].addEventListener('blur', (e) => {
          if (isNaN(vnode.componentInstance.value)) {
            e.target.value = ''
            let event = document.createEvent('HTMLEvents')
            event.initEvent('input', true, true)
            input[0].dispatchEvent(event)
          }
        })
      },
    })
  },
}

如果直接修改vue实例中的值会抛出警告，所以通过触发input event的方式修改实例中的值

| RSS