1、起初选择使用keyup解决
<el-input style="width:50px;" v-model="skuPc.effectiveTime" @keyup.native="number($event)"></el-input>
methods:{
number(e) {
console.log(e.target.value);
let flag = new RegExp("^[1-9]([0-9])*$").test(e.target.value);
console.log(flag);
if (!flag) {
this.$message({
showClose: true,
message: "请输入正整数",
type: "warning"
});
}
}
}
为什么el-input要用@keyup.native?因为el-input是封装的组件,没有原生的keyup事件,如果换作input标签,可直接使用@keyup。
这样可以实现输入非正整数时的内容时实时提示,但是由于是keyup事件,会导致好几个message提示信息同时出现在页面上吗,不太友好。
2、换种事件,使用@blur
<el-input style="width:50px;" v-model="skuPc.effectiveTime" @blur="number($event)"><el-input>
这样只有在输入框失焦时候提示错误信息,符合有好的用户体验要求。