vue Element-ui input 小数点位数 不能为负数 只能输入正整数

普通版:

 <el-input type="number" @keyup.native="proving2($event)"  class="input left align-right" v-model.trim="numData"></el-input>


//**看着比较长是不是呵呵呵~~  不一定全要用到 自行粘贴~!!!!!!!!!!!!!!!!!**

 getBit (value, bit) {
      let str = Number(value);
      str = str.toFixed(bit)
      console.log(str)
      return str;
},
 proving2(e) {
            console.log(e.target.value)
            console.log(this.getBit(e.target.value,1))
            var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
            var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
            if (keynum ==189||keynum == 109) { //禁止输入负数
              this.$message.warning('禁止输入负数')
              e.target.value = 0
            }
            if(e.target.value.indexOf('.') ==1){ //如果值里面有’.‘的话,进去检测位小数点大于1位的话只保留一位
                var x = String(e.target.value).indexOf(".")+1;//得到小数点的位置
                var y = String(e.target.value).length - x;//小数点的位数
                if(y>1){
                   e.target.value = this.getBit(e.target.value,1)
                }
            }
            if(e.target.value>100){ //大于100分时候设置100分
                this.$message.warning('最高分值为100分')
                e.target.value = 100
            }
            if(e.target.value==100){ //当100分时候去掉小数点
                if (keynum ==189|| keynum==190||keynum == 109) {
                    e.target.value = 100
                }
            }
            
        },

升级版

/**
 *
 * @param {*} value 传入的值
 * @param {*} minValue 最小值
 * @param {*} maxValue 最大值
 * @param {*} decimalPlaces 保留几位
 * @returns
 */
export function handleInputWithMaxValue(value, minValue, maxValue, decimalPlaces) {
  // 清除非数字和小数点字符
  const cleanedValue = value.replace(/[^\d.]/g, '');
  // 限制最小值
  const numericValue = parseFloat(cleanedValue);
  if (!isNaN(numericValue) && numericValue < minValue) {
    return `${minValue}`;
  }
  // 限制最大值
  if (!isNaN(numericValue) && numericValue > maxValue) {
    return `${maxValue}`;
  }
  // 如果输入为空,直接返回
  if (cleanedValue === '') {
    return cleanedValue;
  }

  // 如果输入包含小数点,保留几位小数
 if (cleanedValue.includes(".")) {
   const parts = cleanedValue.split(".");
   // 用户试图删除小数点后的值时,只返回整数部分和小数点
   if (decimalPlaces === 0) {
    // 如果 decimalPlaces 为 0,去掉小数点及其后面的值
    return parts[0];
  } else {
    // 只保留指定位数的小数
    const decimalPart = `.${parts[1].slice(0, decimalPlaces)}`;
    return `${parts[0]}${decimalPart}`;
  }
 } else {
   return cleanedValue;
 }
}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端代码の搬运工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值