vue中自定义指令，限制input值为number和小数点的位数

首先遇到一个问题，iOS中input设置type=number是无效的，要想实现弹出数字键盘，只能设置type=tel，然而问题远远没有结束，type=tel是无法输入小数点的，所以要实现限制input为number并且限制小数点的输入，还是需要自己写一些逻辑。

思路就是通过添加input事件监听，通过正则判断是否符合条件，不符合的话，要重置为上一次符合的数值。

---

使用方法类似于

 type="number"
 
 data-dotrange="{0,2}"
 v-model.number.trim="num"
 v-limit-input-number="num"/>
 
复制代码

指令的小逻辑

// limit-input-number.js

// 设置组件中的指定属性的值
const setValue = function (exp, value, context) {
  value = isNaN(value) ? '' : value
  new Function ('context', 'value', `context.${exp} = value`)(context, value)
}
// 自定义指令
export default {
  bind (el, {expression}, {context}) {
    // 初始化lastValue
    el.lastValue = el.value

    // 通过dataset 判断是否允许小数点
    let allowDot = !!el.dataset.dotrange
    let dotRange = el.dataset.dotrange || `{0,2}` // 默认
    let pattern = `^[0-9]+${allowDot ? `(.[0-9]${dotRange})?` : ''}$`

    if (!expression) {
      throw new TypeError('请绑定expression')
    }

    el.handleInputEvent = function (e) {
      setTimeout(() => {
        if (e.target.value === '') {
          setValue(expression, '', context)
          // 遇到非法数值，则重置
          e.target.value = ''
        } else if (e.target.value !== '' && !new RegExp(pattern).test(e.target.value)) {
          setValue(expression, parseFloat(e.target.lastValue), context)
          // 遇到非法数值，则重置为lastValue
          e.target.value = e.target.lastValue
          if (allowDot) {
          // 这个时候，根据业务逻辑，可以收起键盘，给出吐司提示
            e.target.blur()
            context.showToast(`小数点后最多${dotRange.replace(/[}{]/g, '').split(',')[1]}位`)
          }
        }
        e.target.lastValue = e.target.value
      }, 0)
    }
    el.addEventListener('input', el.handleInputEvent, false)
  },
  unbind (el) {
    el && el.removeEventListener('input', el.handleInputEvent, false)
  }
}

复制代码