指令封裝

/**
   * 預設只可輸入正整數
   * 修飾符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">

資料

vue限制文字框輸入數字的正確姿勢