vue自定义指令实现input输入过滤只输入正整数和浮点数

功能

实现只能输入正整数和3位浮点数

代码

floatNumber文件夹下新建两个文件floatNumber.js和index.js

• floatNumber.js

export default function(el) {
  const ele = el.tagName === 'INPUT' ? el : el.querySelector('input')
  ele.addEventListener("keyup", function(e) {
    let val = ele.value;
    if (typeof val === 'string') {
      val = val.replace(/[^\d.]/g, ""); // 清除"数字"和"."以外的字符
      val = val.replace(/^\./g, ""); // 验证第一个字符是数字
      val = val.replace(/\.{2,}/g, "."); // 只保留第一个, 清除多余的
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      val = val.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3'); // 只能输入三个小数
      ele.value = val;
    }
  })
}

• index.js

import Vue from 'vue'
import floatNumber from './floatNumber'

const install = function(Vue) {
  Vue.directive('floatNumber', floatNumber)
}

if (window.Vue) {
  window[ 'floatNumber' ] = floatNumber
  Vue.use(install);
}

floatNumber.install = install
export default floatNumber

• main.js中全局引入

// 正整数和浮点数输入自定义指令
import floatNumber from '@/directive/floatNumber'
Vue.use(floatNumber)

使用

<el-input
        v-model="scope.row.num"
        v-floatNumber
      />