正整数指令实现 vue

405 阅读1分钟
// 指令实现部分
directives: {
  int: {
    bind (el) {
      // 兼容原生元素和非原生组件
      const input = el.nodeName === 'INPUT' ? el : el.getElementsByTagName('input')[0]
      const fn = (e) => {
        input.value = input.value.replace(/(^[^1-9])|[^\d]/g, '')
        // 解决vue数据响应问题
        const ev = document.createEvent('HTMLEvents')
        ev.initEvent('input', true, true)
        input.dispatchEvent(ev)
      }
      input.onkeyup = fn
      input.onblur = fn
    }
  }
},
// vue组件使用
<el-input v-model="value" v-int type="text" />

// 原生元素使用
<input v-model="value" v-int type="text" />