element-ui中el-input限制输入正整数

前台限制一下el-input输入正整数。

MDN-input-type-list查看类型默认特性 

// input标签
<el-input type="number" 
                v-model="form.test" 
                prop="test" 
                placeholder="请输入" 
                @mousewheel.native.prevent  
                @keyup.native="prevent($event)"></el-input>
  1. 添加 type="number"避免禁止非数字输入
  2. @mousewheel.native.prevent 禁止type="number"时滚轮改变数字行为

  3. css隐藏type="number"时出现的改变数字按钮


    默认的上下箭头
  4. @keyup.native="prevent($event)" 监控按钮行为，当按下"-","."时提示，并重置输入。（还有其他办法，见参考）
prevent(e){
 var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
    if (keynum ==189|| keynum==190||keynum == 109 ||keynum == 110 ) {
        this.$message.warning('禁止输入小数以及负数')
        e.target.value = ''
    }
}

以上就完成了限制el-input输入正整数的功能。

参考：限制输入框只能输入正整数

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容