Skip to content

Input Number 数字输入框

xy-input-number 适合数量、金额、时长、阈值这类“既能手输,又要能稳定步进”的字段。它在当前仓库里重点覆盖后台表单和筛选面板的常见数值录入。

基础用法

最常见的用法是配合 v-model 绑定数值,再通过 min / max / step 约束可选范围。

基础用法数值输入

数字输入框支持步进按钮、自定义步长和范围限制。

控制按钮与对齐

controls-position="right" 适合列表筛选栏,align 用来控制输入框内数值的阅读节奏。

库存预警:18补货阈值:72

精度、步长和清空策略

金额、费率和比例字段通常需要一起配置 precisionstep-strictlyvalue-on-clear

折扣系数:0.35预算金额:125.5

清空策略与输入限制

value-on-cleardisabled-scientific 适合金额、比例这类不希望出现空值漂移或科学计数法的录入字段。

预算:128比例:0.35

表单场景

放在 xy-form-item 里时,xy-input-number 会参与 change / blur 校验链路。

变更后会触发 change 校验

失焦后会触发 blur 校验

方法控制与自定义图标

通过 expose 的 focus / blur / increase / decrease,可以把数字输入接进更复杂的编辑流程;increase-icon / decrease-icon 则适合接入项目自己的图标系统。

当前值:12

键盘与行为约定

  • ArrowUp / ArrowDown 会按 step 增减当前值。
  • 开启 step-strictly 后,手输结果会在确认时校正为步长倍数。
  • 清空输入框后,默认回写 null;可通过 value-on-clear 改成 minmax 或某个固定数字。
  • disabled-scientific 会阻止输入 e / E,适合不希望出现科学计数法的录入场景。

API

Input Number Attributes

属性说明类型默认值
id原生 idstringundefined
model-value当前值InputNumberProps["modelValue"]null
min最小值numberNumber.MIN_SAFE_INTEGER
max最大值numberNumber.MAX_SAFE_INTEGER
step步进值number1
step-strictly是否只允许步长倍数booleanfalse
precision数值精度numberundefined
size组件尺寸InputNumberProps["size"]跟随全局配置
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
controls是否显示步进按钮booleantrue
controls-position控制按钮位置InputNumberProps["controlsPosition"]''
value-on-clear清空后的回写值InputNumberProps["valueOnClear"]null
placeholder占位文本string''
name原生 namestringundefined
validate-event是否触发表单校验booleantrue
aria-label原生 aria-labelstringundefined
inputmode原生 inputmodeHTMLAttributes['inputmode']自动推导
align数值对齐方式InputNumberProps["align"]'center'
disabled-scientific是否禁用 e / E 输入booleanfalse

Input Number Events

事件说明参数
update:model-value当前值变化时触发InputNumberValueChangeHandler
input输入中触发InputNumberValueChangeHandler
change确认变更时触发InputNumberChangeHandler
focus获得焦点时触发InputNumberFocusHandler
blur失去焦点时触发InputNumberFocusHandler

Input Number Slots

插槽说明
increase-icon自定义增加按钮图标
decrease-icon自定义减少按钮图标

Input Number Exposes

暴露项说明类型
input原生输入框引用InputNumberInstance["input"]
focus聚焦输入框InputNumberInstance["focus"]
blur让输入框失焦InputNumberInstance["blur"]
increase按当前步长增加InputNumberInstance["increase"]
decrease按当前步长减少InputNumberInstance["decrease"]