Vue指令限制输入框输入整数小数

指令封装

/**
   * 默认只可输入正整数
   * 修饰符float可输入小数，默认两位小数，若想n位小数，可v-input-number.float="n"
   * 修饰符negative可输入负数
   * */
  const inputNumber = {
    bind(el, binding, vNode) {
      let elem = el.tagName === 'INPUT' ? el : el.querySelector('input')

      elem.addEventListener('input', onInput(elem, binding, vNode), false)
    }
  }

  function onInput(elem, binding, vNode) {
    return () => {
      let val = elem.value

      // 只保留负号数字和小数点
      val = val.replace(/[^-d.]/g, '')

      // 根据negative修饰符选择是否保留负号
      if (binding.modifiers.negative) {
        val = val.replace(/(?!^)-/g, '')
      } else {
        val = val.replace(/-/g, '')
      }

      if (binding.modifiers.float) {

        // 只保留一个小数点
        let index = val.indexOf('.')

        if (index !== -1 && index !== val.length - 1) {
          val = val.substring(0, index) + '.' + val.substring(index + 1).replace(/./g, '')
        }

        // 限制小数位数，默认保留两位小数
        let pointKeep = isNaN(binding.value) ? 2 : parseInt(binding.value),
          reg = new RegExp('^(-?)(\d+)\.(\d{' + pointKeep + '}).*$')

        val = val.replace(reg, '$1$2.$3')
      } else {
        val = val.replace(/./g, '')
      }

      elem.value = val
      dispatchEvent(new Event('input'))
    }
  }

  Vue.directive('input-number', inputNumber)

调用

<input type="text" v-model="number" v-input-number.float.negative="3">

在element-ui中el-input，使用dispatchEvent(new Event('input'))触发v-model值改变会有问题
改用vNode.data.model.callback(val)来修改v-model的值

 elem.value = val
 vNode.data.model.callback(val)

资料

vue限制文本框输入数字的正确姿势