简介

数字步进器组件，用于数字的增减操作。支持自定义步长、最大最小值、千分符显示、精度控制等功能，满足不同数字输入场景。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "number-stepper": "ava-ui/fxui/input-number/index"
}

代码演示

功能用法

样式状态

API

属性

属性	说明	类型	可选值	默认值
value	当前值	string	—	''
min	最小值	number	—	-Number.MAX_VALUE
max	最大值	number	—	Number.MAX_VALUE
step	步长	number	—	1
size	尺寸	string	normal/medium/large	medium
disabled	是否禁用	boolean	—	false
hidden	是否隐藏输入框	boolean	—	false
showThousands	是否显示千分符	boolean	—	false
maskValue	掩码占位符	string	—	''
maxlength	最大输入长度	number	—	-1
integer_places	整数位数限制	number	—	-1
decimal_places	小数位数限制	number	—	-1
inputWidth	输入框宽度（px）	number	—	—

尺寸规格说明

数字步进器提供三种尺寸，可以在不同场景下选择合适的尺寸。

尺寸	说明	高度(px)	按钮宽度(px)	输入框宽度(px)	文字大小(px)
normal	正常尺寸	24	24	46	12
medium	中等尺寸（默认）	28	28	58	14
large	大尺寸	32	32	58	16

• normal (24px): 适用于紧凑布局或表格中的数字输入
• medium (28px): 默认尺寸，适用于大多数场景
• large (32px): 适用于需要强调的数字输入或触控优化场景

事件

事件名	说明	回调参数
change	值变化时触发
input	输入时触发
focus	获得焦点时触发
blur	失去焦点时触发

说明

• 支持通过 step 属性设置步长，包括小数步长如 0.1、0.01 等。
• 支持通过 min 和 max 属性限制数值范围，超出范围的按钮会自动禁用。
• 支持通过 showThousands 属性显示千分符，便于大数字的阅读。
• 支持通过 integer_places 和 decimal_places 属性控制数字精度。
• 支持通过 inputWidth 属性自定义输入框宽度（单位 px），如 inputWidth={100}。
• 支持通过 maskValue 属性设置占位符，在无值时显示。
• 组件内部使用数字键盘进行输入，支持小数和负数。

打开预览