el-input输入框限制只能输入数字
方法一
直接在组件中添加@οninput
事件,实现只能输入数字
- 该方法在英文输入法的情况下可以实现只能输入数字,但是在中文输入法的情况下可以输入中文和其他字符
-该方法会破坏vue的双向绑定,即在输入中文后再输入数字,model.time数据并没有发生改变,不会传值
<el-input
placeholder="大于多少(只限数字)"
οninput="value=value.replace(/[^0-9]/g,'')"
v-model="model.time"
maxlength="32">
</el-input>
方法二
在组件中添加@input
事件,触发handleInput 函数
<el-input
placeholder="大于多少(只限数字)"
@input="handleInput"
v-model="model.time"
maxlength="32">
</el-input>
handleInput (value) {
// 正则表达式判断正整数
const pattern = /^[1-9]\d*$/g
if (pattern.test(value)) {
// 双向绑定
this.model.time = value
} else {
// 输入值不为正整数,则从中提取出数字并拼接为字符串,赋值给model.time
const num = value.match(/\d+/g)
this.model.time = num ? num.join('') : ''
}
}