el-input限制输入数字（小数）

需求: input输入框只能输入纯数字、小数。小数点后保留几位不做限制

废话: 参考了一大堆解决方案后，没有一个能满足我当前的业务需求，故做个记录

思路: 监听input事件，然后用正则过滤掉不符合需求的值即可

// limit-function.js 文件

    import Vue from "vue"; 
    let v = new Vue();
    export default {
     /**
       * 只能输入数字(小数点)
       */
      inputDigit(value) {
          // 定义一个正则:只接受如下形式例子: 3.1235 5.1354 
          // 此正则不对小数长度做限制
          let digitReg = /^\d+(\.\d+)?$/;

          // 步骤一: 将输入的值分割成一个一个的字符
          let strList = value.split("");
          let newValue = "";

          // 步骤二: 遍历字符数组，判断每个字符是否符合期望
          for (let item of strList) {
              if (isNaN(item - 0)) {
                  if (item === ".") {
                      newValue += item;
                  }
              } else if (/\d/g.test(item)) {
                  newValue += item;
              }
          }

          // 步骤三: 对已经符合期望的字符进行最后的格式验证
          // 因为有可能存在 2.323.32.. 这种多个小数点的情况，所以要再次验证
          if (!digitReg.test(newValue)) {
              let strs = newValue.split(".");
              if (strs.length > 1) {
                  newValue = strs[0] + "." + strs[1];
              }
          }
          return newValue;
      }
    }

vue2组件中使用方法

// main.js中绑定这个limit-function到vue原型对象上，供全局使用

import limit from "./utils/limit-fuction";
Vue.prototype.$limit = limit;

<el-input 
    v-model="obj.num"  
    @input="(e) => (obj.num = $limit.inputDigit(e))"  >
</el-input>