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,像这种输入多个小数点的数值,跟我们平常输入的数字肯定就是不一样的,所以后面这段代码就是为此做的判断,然后进行字符串拼接,最后进行数值重新绑定;