场景

今天遇到一个需求，就是要输入利润率,这个要求：输入的内容是介于1-100之间的正整数。

先上效果图：

代码

 <a-input-number placeholder="利润点"
                style="width:230px;"
                :formatter="(value) => `${value}%`"
                :precision="0"
                :parser="(value) => value.replace('%', '')"
                :min="0"
                @blur="profitRateBlur($event)"
                v-model.number="pro.profitRate"
            />

分析上面的代码：
:formatter="(value) => ${value}%": 设置出现%样式
:parser="(value) => value.replace('%', '')"与formatter成对出现
:precision="0":如果想要输入整数，则必须设置precision='0'才可以
:min="0":最小值为0，如果设置为1，输入的时候还需要将1删除，为了方便设置为0
@blur="profitRateBlur($event)":监听失去焦点事件，用于判断是否有输入内容

blur对应的函数如下：

profitRateBlur(e) {
  var val = e.target.value || 0;
  if (val >=0&&val<=100) {
  	this.pro.profitRate = val;
    return;
  } else {
    this.$message.error("请输入0-100之间的利润点");
    return;
  }
},

最后总结：

同时设置:min='0'和:precision='0'就可以实现限制只能输入正整数！！！