数字输入 Input Number

专门输入数字的输入框。它和 Input 非常类似，拥有 Input 大部分功能。

基础使用

这个组件用于数字输入。传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

隐藏源代码

值域

通过 max 和 min 属性设置取值范围，左右都是闭区间。

隐藏源代码

步长

通过 step 属性设置加减按钮的步长。strictStep 属性为 true 时，限制值必须为 step 的整数倍。

隐藏源代码

精度

通过 precision 属性设置精度，该属性会设置值精确到的小数位。

隐藏源代码

自定义模板

通过同时传入 format、allowInput、parse 三个属性设置数字展示模板，例如实现展示附带单位，千分位数。

隐藏源代码

按钮位置

加减按钮的位置也是可以配置的，通过 buttonPlacement 属性设置。

隐藏源代码

更多配置

InputNumber 还拥有 Input 组件的大部分功能。

Disabled, Readonly, Loading & Clearable

Shape

Size

Slot

+

s

Composite

Status

Expose

隐藏源代码

API

InputNumberProps

属性	类型	可选	默认值	描述	版本
modelValue	string | null	是		数字输入框的值（受控模式），支持 v-model。	0.0.2
defaultValue	string | null	是		数字输入框的默认值（非受控模式）。	0.0.2
placeholder	string	是		占位符文本。	0.0.2
disabled	boolean	是	false	是否禁用。	0.0.2
readonly	boolean	是	false	是否只读。	0.0.2
max	number	是	Number.MAX_SAFE_INTEGER	最大值（闭区间）。	0.0.2
min	number	是	Number.MIN_SAFE_INTEGER	最小值（闭区间）。	0.0.2
step	number	是	1	加减按钮的步长。	0.0.2
precision	number	是		精确到小数位，取值为 [0, 100] 的整数。	0.0.2
strictStep	boolean	是	false	严格步长，限制值必须为 step 的整数倍。	0.2.1
format	(value: number | Nullish) => string	是		将数字值转换为字符串展示的函数。	0.0.2
allowInput	(value: string) => boolean	是		检查数字输入框的文本是否允许输入的函数。	0.0.2
parse	(value: string) => number	是		将数字输入框的文本转换为数字值的函数。	0.0.2
clearable	boolean	是	false	是否显示清除按钮。	0.0.2
loading	boolean	是	false	是否显示加载状态。	0.0.2
size	'medium' | 'large' | 'small'	是	'medium'	数字输入框尺寸。	0.0.2
shape	'rect' | 'round'	是	'rect'	数字输入框形状。	0.0.3
borderRadius	NumberOrPercentage | NumberOrPercentage[]	是		圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。	0.0.2
buttonPlacement	boolean	是	'end'	加减按钮的位置。	0.0.2
status	'success' | 'warning' | 'error' | 'normal'	是	'normal'	表单验证状态。	0.0.2
autofocus	boolean	是	false	原生 <input> 的 autofocus 属性。	0.0.2
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.1.0

InputNumberEvents

事件	参数	描述	版本
input	value: number, e: Event	数字输入框输入时的回调。	0.0.2
update:modelValue	value: number	更新 modelValue 的回调。	0.0.2
change	value: number, e: Event | undefined	输入内容变化时的回调。	0.0.2
clear	value: number	点击清除文本按钮，清除内容时的回调。	0.0.2
blur	e: FocusEvent	数字输入框失焦时的回调。	0.0.2
focus	e: FocusEvent	数字输入框聚焦时的回调。	0.0.2

InputNumberSlots

插槽	参数	描述	版本
prefix		前缀内容。	0.0.2
suffix		后缀内容。	0.0.2

InputNumberExpose

属性	类型	可选	默认值	描述	版本
focus	() => void	否		聚焦到当前数字输入框。	0.0.2
blur	() => void	否		取消聚焦当前数字输入框。	0.0.2
clear	() => void	否		清空当前数字输入框。	0.0.2
select	() => void	否		选中当前数字输入框内容。	0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`