el-input输入限制(只能输入0-100的正整数,最小值~最大值联动)

  1. 只能输入0-100的正整数
  2. 最小值~最大值联动
  3. <el-input
      style="width: 70px"
      :formatter="formatInput"
      :parser="parseInput"
      @blur="checknum('min', inputData, 'value1', inputData.value2)"
      v-model.number="value"
      placeholder="最小值"
    />
    ~~
    <el-input
      style="width: 70px"
      :formatter="formatInput"
      :parser="parseInput"
      @blur="checknum('max', inputData, 'value2', inputData.value1)"
      v-model.number="value"
      placeholder="最大值"
    />
    
    
    const formatInput = (value) => {
      // 格式化输入的值,保留数字部分
      return value.replace(/^0+(\d)|[^\d]+/g, '')
    }
    const parseInput = (value) => {
      // 解析输入的值,将其转换为合法的数字
      let numValue = parseInt(value, 10)
      if (isNaN(numValue)) return '' // 处理输入非数字的情况
      // 限制输入的最小值和最大值
      return Math.max(0, Math.min(100, numValue)).toString()
    }
    //最小值~最大值
    const checknum = (type, inputData, field, otherValue) => {
      let numValue = parseInt(inputData[field], 10) || 0
      if (type == 'max') {
        if (numValue < otherValue) {
          numValue = otherValue
        }
      } else {
        console.log(numValue, otherValue)
        if (otherValue != null && numValue > otherValue) {
          numValue = otherValue
        }
      }
      inputData[field] = numValue
      return numValue
    }
    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值