设置 el-input-number 整数取值

el-input-number 是数值输入标签,默认为非整类型。但是很多情况下,要求输入数值必须为正整数,这就需要自己添加方法进行设置

        <el-input-number
            :min="0"
            v-model="chapter.sort"
            controls-position="right"
            placeholder="请输入排序"
            @change="toInteger"
          />

对应function:

toInteger() {
      let reg = /^[0-9]+$/
      if(!reg.test(this.chapter.sort)){
        this.$message.warning("只能输入整数排序")
        // 用以在dom渲染挂载后重新触发dom渲染挂载
        this.$nextTick(() => {
          this.chapter.sort = parseInt(this.chapter.sort)
        })
      }
    }

 

  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
el-input-number可以通过多种方式限制整数输入。一种方式是使用v-model.number和oninput属性,通过限制输入的值在指定范围内。例如,可以使用v-model.number来限制只能输入数字,并使用oninput事件来在输入时对输入值进行修改,保证其为整数并满足限制条件。比如,可以使用以下代码实现: <el-input v-model.number="count" oninput="if(value < 0 || value == '' || value == null) value = 0; if(value > 100) value = 100;"></el-input> 另一种方式是使用自定义指令来实现限制整数输入。可以在标签上添加一个自定义指令,例如numberOnly,并在该指令的定义中使用适当的逻辑来限制只能输入整数。比如,可以使用以下代码实现: directives: { numberOnly: { inserted: function(el) { el.addEventListener("input", function(e) { e.target.value = Number(e.target.value.replace(/\D/g, '')); }); } } } 然后,在el-input-number标签上应用这个自定义指令,如下所示: <el-input-number v-number-only></el-input-number> 通过以上方法,可以限制el-input-number只能输入整数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [el-input输入框限制输入0-100正整数](https://blog.csdn.net/weixin_45304198/article/details/129789996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue 限制input只能输入正数的操作](https://download.csdn.net/download/weixin_38601390/13126577)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值