el-input-number初始数字问题

log远方的远

已于 2024-04-18 16:45:29 修改

阅读量1.3k

点赞数 12

CC 4.0 BY-SA版权

文章标签： vue.js 前端 elementui

于 2024-04-09 19:37:15 首次发布

本文链接：https://blog.csdn.net/weixin_47390278/article/details/137563871

去除初始数字初始值给undefined即可
项目版本 “element-ui”: “2.7.2”, “vue”: “2.6.10”,
一般项目中都会有数字输入框的校验，平时我们一般都用这三种写法
建议用普通的el-input 写正则替换，旧版本，el-input-number里没有input事件、value定义
新版本需要去源码里看有没有，文档中没显示，就比如element plus
在这里插入图片描述

常用方法

type=“number”

<el-input type="number"></el-input>

问题点1:
后面有步进箭头
解决方案:

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Safari */
}

在这里插入图片描述

问题点2:
输入中文光标跑上面去了

解决方案:

.el-input__inner{
  line-height: 1px !important;
  }

更多限制
https://blog.csdn.net/qq_40453972/article/details/125680647
在这里插入图片描述

正则替换

input (e) {
  let value = e.target.value
  value = value.replace(/^0+/, "0"); // 将0+替换成0
  value = value.replace(/^0[1-9]/, value.replace(/^0/, '')); //首个数字为0后续不为0去掉头部的0
  value = value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
  value = value.replace(/^\./g, ""); //验证第一个字符是数字
  value = value.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
  value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
  e.target.value = value
}

el-input-number

<el-input-number v-model="num" :max="10"></el-input-number>

问题点:
初始有默认数字，plus没有此问题，但是设置min值也会显示
在这里插入图片描述

解决方法1:
复制源码修改成自己的组件
node_modules/element-ui/packages/input-number/src/input-number.vue
在这里插入图片描述

源代码:
在这里插入图片描述

修改为:
在这里插入图片描述

value: {
    immediate: true,
    handler (value) {
      let newVal = Number(value);
      if (value === undefined || value === null || value === '' || isNaN(newVal)) {
        this.currentValue === value
        return
      }
      if (this.precision !== undefined) {
        newVal = this.toPrecision(newVal, this.precision);
      }
      if (newVal >= this.max) newVal = this.max;
      if (newVal <= this.min) newVal = this.min;
      this.currentValue = newVal;
      this.userInput = null;
      this.$emit('input', newVal);
    }
  }