Vue+Element文本框限制输入数字

Vue模板显示部分

<el-input
   v-model="modelForm.points_c"
   type="text"
   class="mar-l-sm"
   style="width: 165px"
   @change="SetNumber(modelForm.points_c, 'points_c')"
 >
</el-input>

Vue函数处理部分

// 文本框限制只能输入数值
    SetNumber(val, code) {
      let value = val.replace(/[^0-9.]/g, '').trim();
      const strlen = value.includes('.') ? value.split('.').length - 1 : 0;
      if (strlen >= 2) {
        const arr = value.split('.');
        value = `${arr[0]}.${arr[1]}`;
      }
      this.$set(this.modelForm, code, value);
    },

 函数功能解析：第一个参数是绑定的值，第二个参数是绑定值所属对象modelForm里的字段名，

首先将输入的文本内容进行正则内容筛选替换，不是数字及小数点内容全部替换为空，并且剔除左右空字符串，这里完成了基本操作，后面一段代码是处理用户输入这种数值:12.12.12.12,像这种输入多个小数点的数值，跟我们平常输入的数字肯定就是不一样的，所以后面这段代码就是为此做的判断，然后进行字符串拼接，最后进行数值重新绑定；