ant-design-vue基础知识积累——a-input-number限制只能输入正整数

叶浩成520

已于 2023-09-06 11:56:53 修改

阅读量2w

点赞数 7

分类专栏：前端基础知识 antd 文章标签： ant-desigin-vue antd

于 2021-11-23 15:08:19 首次发布

本文链接：https://blog.csdn.net/yehaocheng520/article/details/121493595

版权

前端基础知识同时被 2 个专栏收录

339 篇文章

订阅专栏

antd

60 篇文章

订阅专栏

本文介绍了如何使用Ant Design Vue的a-input-number组件来限制用户只能输入介于1-100之间的正整数，通过设置`:min='0'`和`:precision='0'`属性，配合`:formatter`和`:parser`实现格式化显示，并在失去焦点时通过`@blur`事件进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant-design-vue基础知识积累——a-input-number限制只能输入正整数

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

场景

今天遇到一个需求，就是要输入利润率,这个要求：输入的内容是介于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;
  }
},