控制el-input只输入数字的几种方式

一、 v-model.number 指令修饰符

使用v-model.number可以将输入的数据转换为Number类型。但是本质上还是String类型

<el-input v-model.number="total"></el-input>

有三个问题：
1.键盘先输入数字时没有问题，数字后面不会有字符
2.如果先输入的是字符再输入数字则是拼接效果，字符不会被排除且可以输入中文，如：

ab123

3.以上两种都不会排除e，如

e123, 123e

总结：
v-model.number 只能满足先输入数字且不能排除e，所以需要结合其他方式一起使用

二、 type=“number”

需要结合css样式，去掉input右边的滚动条

<el-input v-model="total" type="number"></el-input>// css::v-deep input::-webkit-outer-spin-button,::v-deep input::-webkit-inner-spin-button {-webkit-appearance: none !important;}::v-deep input[type='number']{-moz-appearance: textfield !important;}

三、在属性中添加onkeyup或者oninput进行正则判断

<el-input 
    v-model="total" 
    οnkeyup="value=value.replace(/[^\d]/g,0)"></el-input>

经过测试，以上方式，在输入了中文之后会出现取值不对的bug

四、 利用表单prop的自定义校验方式

// 校验规则：正整数和0exportconstvalidateNonnegative=()=>(rule, value, callback)=>{if(/^([0]|[1-9][0-9]*)$/.test(value)===false){callback(newError('请输入一个正确的数值'));}else{callback();}};