Number Field 数字输入框

带加减按钮的数字输入框。按住按钮可连续调整；键盘上下方向键按步长变化；输入的值在回车或失焦时被限制到范围内。

基础用法

@Local qty: number = 3;

SNumberField({ value: this.qty!!, min: 0, max: 10 })
Text(`value = ${this.qty}`)

网页近似预览，真机效果以 HarmonyOS 渲染为准。

步长、小数位与状态

SNumberField({ defaultValue: 1.5, step: 0.25, decimals: 2, min: 0 })
SNumberField({ defaultValue: 18, min: 0, max: 100, invalid: true })
SNumberField({ defaultValue: 5, disabled: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SNumberField

shadcn-vue 的 NumberField（NumberFieldContent + Decrement + Input + Increment 合为一个组件）：一个居中显示文字、内含 − / + 按钮的输入框。

• 按住 − / + 会连续增减（触控 / 鼠标）；单击、空格 / Enter 或屏幕阅读器则每次只增减一步。数值会限制在 [min, max] 之间，并按步长的精度取整。
• 可以自由输入；在按下 Enter 或失去焦点时解析文字并限制范围（无效文字会恢复）。
• 键盘：输入框获得焦点时，↑ / ↓ 方向键可增减一步。
• decimals 以固定的小数位数格式化显示值（精简版的 formatOptions）。

属性	类型	默认值	说明
value!!	number | undefined	undefined	受控值（配合 !! 使用）。留空则为非受控。
defaultValue	number	0
min	number | undefined	undefined
max	number | undefined	undefined
step	number	1
decimals	number | undefined	undefined	显示的固定小数位数（undefined 表示按需显示）
disabled	boolean	false
invalid	boolean	false
label	string | undefined	undefined	没有可见标签时使用的无障碍名称。

事件	类型	默认值	说明
onValueChange	(v: number) => void	() => { }