Vue自定义数字输入指令

1.src/utils/directive.js

编写如下代码

const directive = {}

// 数字输入
directive.numberInput = {
  bind(el, binding, vnode) {
    // let input = vnode.elm.children[0];
    let input =  el.tagName === 'INPUT' ? el : vnode.elm.children[0];
    input.addEventListener('compositionstart', () => {
      vnode.inputLocking = true
    })
    input.addEventListener('compositionend', () => {
      vnode.inputLocking = false
      input.dispatchEvent(new Event('input'))
    })
    input.addEventListener('input', () => {
      if(vnode.inputLocking) {
        return;
      }
      let oldValue = input.value;
      let newValue = input.value;
      // modifiers为修饰符对象，传入了float，则其float属性为true
      if (binding.modifiers.float) {
        // 清除"数字"和"."以外的字符
        newValue = newValue.replace(/[^\d.]/g, '')
        // 只保留第一个, 清除多余的
        newValue = newValue.replace(/\.{2,}/g, '.')
        // 第一个字符如果是.号，则补充前缀0
        newValue = newValue.replace(/^\./g, '0.')
        // 0开头的只保留第一个0, 清除多余的
        newValue = newValue.replace(/^0{2,}/g, '0')
        // 两位数已上不能0开头
        if(/^0\d+/.test(newValue)) {
          newValue = newValue.slice(1)
        }
        //保证.只出现一次，而不能出现两次以上
        newValue = newValue.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        // 保留几位小数
        if (typeof binding.value !== 'undefined') {
          // 期望保留的最大小数位数
          let pointKeep = 0
          if (typeof binding.value === 'string' ||
            typeof binding.value === 'number') {
            pointKeep = parseInt(binding.value)
          }
          if (!isNaN(pointKeep)) {
            if (!Number.isInteger(pointKeep) ||
              pointKeep < 0) {
              pointKeep = 0
            }
            const str = '^(\\d+)\\.(\\d{' + pointKeep + '}).*$'
            const reg = new RegExp(str)
            if (pointKeep === 0) {
              // 不需要小数点
              newValue = newValue.replace(reg, '$1')
            } else {
              // 通过正则保留小数点后指定的位数
              newValue = newValue.replace(reg, '$1.$2')
            }
          }
        }
      } else {
        // 只保留整数
        newValue = newValue.replace(/[^\d]/g, '')
        newValue = newValue ? parseInt(newValue) : ''
      }
      // 判断是否需要更新，避免进入死循环
      if(+newValue !== +oldValue) {
        input.value = newValue
        input.dispatchEvent(new Event('input')) // 不知道为啥整数的时候会报错
      }
    })
  }
}
export default directive

2.src/main.js

引入指令文件

// 自定义全局指令
import directive from "@/utils/directive";
Vue.directive('number', directive.numberInput);

3.组件中使用

<!--带小数点并保留2未 具体位数可以自己定义-->
 <el-input
    v-number.float="2"
    placeholder="金额"
    v-model="formData.price"
 ></el-input>
   <!--整数-->
  <el-input
    v-number
    placeholder="金额"
    v-model="formData.price"
 ></el-input>