//推荐使用 formatter :

实时验证,输入值大于100时显示100,并且不显示多余的数字;值为空时显示0 ;如果不满足需求你可以在接着改 

 

代码示例:

<a-input-number
 v-model:value="item.rankScore"
 :min="0"
 :max="100"
 :formatter="formatter"
 @change="handleChange(item)"
 style="width: 60px;"
/>

//不推荐使用
//只是增加提示 ,输入框的值在失去焦点的时候变为100,
handleChange(){
    var reg = /^([0-9]{1,2}|100)$/;      //0-100的正整数
    console.log(item.rankScore);
    if(!reg.test(item.rankScore)){
        message.error("只能输入0-100的正整数");
    }
}


//推荐使用: 实时验证,输入值大于100时显示100,并且不显示多余的数字;值为空时显示0 ;如果不满足需求你可以在接着改
formatter(value){
    let reg = /^([0-9]{1,2}|100)$/;  //0-100的正整数
      let reg1 = /\D/g;
      if(reg.test(value)){
        return Number(value.replace(reg1,'')).toLocaleString();
      }else{
        // value = 100
        if(value == ''){
          return 0;
        }else{
          value = 100;
          return value
        }
      }
}




//去除 input输入框后面的小箭头

/deep/.ant-input-number{
  width: 100%;
  height: 100%;
  box-shadow: none;
  .ant-input-number-input-wrap{
    height: 100%;
    input{
      height: 100%;
      text-align: center;
    }
  }
  .ant-input-number-handler-wrap{
    display: none;
  }
}

 

实例二:

需求,只能输入数字 ,并且只能输入0-100的正整数,如果输入大于100的数变为100,禁止输入字母和其他字符,

const formatter = value => {

      let reg = /^([0-9]{1,2}|100)$/;

      let reg1 = /\D/g;

      if(reg.test(value)){

        return Number(value.replace(reg1,'')).toLocaleString();

      }else{

        if(value > 100){ //输入值大于100时返回100

          return 100;

        }else{

          return value.replace(reg1,''); //禁止输入其他字符

        }

      }

    };

 

Logo

前往低代码交流专区

更多推荐