InputNumber 数字输入框
仅允许输入标准的数字值，可定义范围。
基础用法
使用 v-model 绑定变量，可以使用 min 和 max 属性限制输入值的范围。
当前值: 1
基础用法
禁用状态
使用 disabled 属性禁用输入框。
禁用状态
步数
使用 step 属性控制步长。
步长为 2
步数
精度
使用 precision 属性控制数值精度。
精度为 2 位小数
精度
按钮位置
使用 controls-position 属性可以将控制按钮放置在右侧。
按钮位置
不同尺寸
使用 size 属性可以控制输入框的尺寸。
不同尺寸
前缀和后缀
使用 prefix 和 suffix 属性可以添加前缀和后缀文本。
¥
%
$USD
前缀和后缀
可清空
使用 clearable 属性可以启用清空按钮。
鼠标悬停时显示清空按钮
可清空
自定义验证
使用 validator 属性可以自定义验证规则。
验证范围: 0 ~ 100
自定义验证
在 Nuxt 中使用
InputNumber 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入。
Nuxt 中使用
SSR 注意事项：
- ✅ 基础数值输入、步长计算完全支持
- ✅ 精度处理（precision）在服务器端即完成格式化
- ✅ 控制按钮样式及位置在 SSR 中一致支持
- ⚠️ 键盘事件监听仅在客户端激活后生效
SSR 安全性
InputNumber 组件在 SSR 阶段会自动处理数值的精度和边界值约束，确保首屏加载时显示的数值是符合预期的，避免水合时的数值跳变。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | number | — |
| min | 最小值 | number | -Infinity |
| max | 最大值 | number | Infinity |
| step | 步长 | number | 1 |
| step-strictly | 是否只能输入步长的倍数 | boolean | false |
| precision | 数值精度 | number | — |
| size | 尺寸 | 'large' | 'default' | 'small' | 'default' |
| disabled | 是否禁用 | boolean | false |
| readonly | 是否只读 | boolean | false |
| controls | 是否显示控制按钮 | boolean | true |
| controls-position | 控制按钮位置 | '' | 'right' | '' |
| prefix | 前缀文本 | string | — |
| suffix | 后缀文本 | string | — |
| prefix-icon | 前缀图标 | Component | — |
| suffix-icon | 后缀图标 | Component | — |
| clearable | 是否可清空 | boolean | false |
| validator | 自定义验证函数 | (value: number | undefined) => boolean | string | — |
| placeholder | 输入框占位符 | string | — |
| value-on-clear | 清空时的值 | number | null | 'min' | 'max' | null |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 绑定值变化时触发 | (currentValue: number | undefined, oldValue: number | undefined) => void |
| input | 输入时触发 | (value: number | undefined) => void |
| focus | 聚焦时触发 | (event: FocusEvent) => void |
| blur | 失焦时触发 | (event: FocusEvent) => void |
| clear | 清空时触发 | () => void |
Slots
| 插槽名 | 说明 |
|---|---|
| prefix | 自定义前缀内容 |
| suffix | 自定义后缀内容 |
| decrease-icon | 自定义减少按钮图标 |
| increase-icon | 自定义增加按钮图标 |
Expose
| 属性名 | 说明 | 类型 |
|---|---|---|
| focus | 使输入框获取焦点 | () => void |
| blur | 使输入框失去焦点 | () => void |
| clear | 清空值 | () => void |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-input-number-width | 输入框宽度 | 150px |
--yh-input-number-height | 输入框高度 | var(--yh-component-size-default) |
--yh-input-number-font-size | 字体大小 | var(--yh-font-size-base) |
--yh-input-number-bg-color | 背景颜色 | var(--yh-fill-color-blank) |
--yh-input-number-border-color | 边框颜色 | var(--yh-border-color) |
--yh-input-number-btn-color | 按钮颜色 | var(--yh-text-color-secondary) |