卓尔高考网

vue实现input框只能输入正整数

篇首语:本文由小编为大家整理,主要介绍了vue实现input框只能输入正整数相关的知识,希望对你有一定的参考价值。

参考技术A 1、起初选择使用keyup解决



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



这样只有在输入框失焦时候提示错误信息,符合有好的用户体验要求。

以上是关于vue实现input框只能输入正整数的主要内容,如果未能解决你的问题,请参考以下文章

您可能还会对下面的文章感兴趣: