InputNumber 计数器
仅允许输入标准数字值的输入框:内置步进按钮与键盘上下键步进,min/max 自动钳制(到边界后对应按钮禁用),支持精度格式化与步长倍数约束。在 eb-form 中 change / blur 时机自动触发校验。
基础用法
v-model 绑定数值,min / max 约束有效范围:步进与手动输入超出范围时自动钳制到边界值;未绑定初始值时步进以 min(min 为负无穷时取 0)为基准。
步长与严格步长
step 定义每次步进的幅度(默认 1),支持小数;step-strictly 开启后绑定值只能是 step 的倍数,手动输入的值会在失焦时四舍五入到最近倍数,适合按固定档位取值的场景(如每 10 件一箱)。
范围与精度
min / max 是最常用的约束(如库存 0 - 100);precision 固定小数位数,输入后按位格式化(如金额保留两位),建议与 step 的小数位对齐。
控制按钮
controls-position="right" 将步进按钮收拢到右侧上下排列(默认在输入框两侧);controls 设为 false 时隐藏按钮,仅保留键盘步进。
尺寸
size 支持 large / small(缺省为默认高度),位于 eb-form 内时会继承表单尺寸。
禁用与只读
disabled 整体禁用(含步进按钮);readonly 只读,输入与步进均被禁止,适合回显数值。
清空与替代值
手动清空输入框后,value-on-clear 不为 null 时以替代值写入绑定值(默认 null 表示清空后不更新),常与 min 配合保证业务上不允许空值。
格式化展示
formatter 控制展示格式(如千分位金额),parser 把输入文本解析回数值;只传 formatter 时聚焦显原始数值串、失焦回显格式化值,缺省 parser 会自动去千分位逗号解析。传入 formatter 或 parser 后输入框切换为文本输入(inputmode 为 decimal),以容纳格式字符。
前后缀块
addon-before / addon-after 在输入框外侧拼接前后缀块(货币符号、单位等),插槽 addon-before / addon-after 优先于同名 prop,可承载任意内容。
API
InputNumber Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | number | — |
| min / max | 允许的最小值 / 最大值(超出自动钳制,到边界后对应按钮禁用) | number | -Infinity / Infinity |
| step | 步长,支持小数 | number | 1 |
| step-strictly | 只能输入 step 的倍数(手动输入取整到最近倍数) | boolean | false |
| precision | 数值精度(小数位数),输入后按位格式化 | number | — |
| size | 尺寸,支持 large / small | string | |
| controls | 是否显示步进按钮 | boolean | true |
| controls-position | 按钮位置:right 为右侧上下排列,缺省在两侧 | string | |
| value-on-clear | 清空输入时的替代值,null 表示清空后不更新绑定值 | number | null | null |
| disabled | 禁用(同时响应表单禁用态) | boolean | false |
| readonly | 只读(输入与步进均被禁止) | boolean | false |
| placeholder | 占位文本 | string | |
| name | 原生 name 属性 | string | — |
| formatter | 展示格式化函数(如千分位),传入后输入框切换为文本输入 | (value: number) => string | — |
| parser | 把输入文本解析回数值,缺省去千分位逗号后解析 | (text: string) => number | — |
| addon-before | 框外前缀块文案,与 addon-before 插槽二选一(插槽优先) | string | |
| addon-after | 框外后缀块文案,与 addon-after 插槽二选一(插槽优先) | string |
InputNumber Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update:modelValue / change | 值变化(步进、输入失焦提交),返回钳制与格式化后的数值 | (value: number) => void | — |
| blur | 失焦,并触发表单项 blur 校验 | (e: FocusEvent) => void | — |
| focus | 聚焦 | (e: FocusEvent) => void | — |
InputNumber Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| addon-before | 框外前缀块内容,优先于 addon-before prop | — | — |
| addon-after | 框外后缀块内容,优先于 addon-after prop | — | — |
InputNumber Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| focus | 使输入框聚焦 | () => void | — |
| blur | 使输入框失焦 | () => void | — |
| ref | 内部原生 input 元素引用 | HTMLInputElement | — |