el-input-number可输入，并清空后回车自动填入最小值

最新推荐文章于 2024-08-28 14:22:55 发布

F N Nancy

最新推荐文章于 2024-08-28 14:22:55 发布

阅读量710

点赞数

文章标签： elementui

本文链接：https://blog.youkuaiyun.com/NancyFyn/article/details/129746216

版权

文章描述了一个使用Vue.js组件el-input-number的场景，通过v-model绑定变量xxx并监听change事件进行值的变更处理。handleChangeElseAaccuracy函数利用正则表达式验证输入值，确保为数字。当输入不符合规则时，利用$nextTick更新DOM并调用isNaNelseAaccuracy方法来处理不合法的值，将变量重置为空字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-input-number v-model="xxx" @change="handleChangeElseAaccuracy" style="width: 30%;" :min="0" :max="10"></el-input-number>

handleChangeElseAaccuracy() {
      let reg = /^[0-9]+$/
      if(!reg.test(xxx)){
        // 用以在dom渲染挂载后重新触发dom渲染挂载
        this.$nextTick(() => {
          xxx = parseInt(xxx)
          this.isNaNelseAaccuracy(xxx)
        })
      }
    },
    isNaNelseAaccuracy(e) {
      if(e !== e) {
        xxx = ''
      }
    },