InputNumber 数字输入框
数字输入框组件,用于输入数字类型的数据。
何时使用
当需要获取标准数值时。
基本使用
基础的数字输入框用法。
禁用状态
通过 disabled 属性指定是否禁用 input 组件。
只读状态
readonly 让数值不可编辑但仍可读出 / focus,常用于「计算结果展示但允许 copy」的场景。
数值范围
使用 min 和 max 属性限制数值范围。
步数
使用 step 属性设置步长。
精度
使用 precision 属性设置数值精度。
尺寸
支持 large / default / small 三档,与库内其他录入组件(Input / Select 等)统一。
控制按钮位置
使用 controls-position 属性设置控制按钮位置。
允许空值
使用 allow-empty 属性允许输入框为空。
监听 change 事件
change 返回当前值与变更前的旧值两个参数,方便埋点 / 撤销栈等场景。
实例方法(ref)
通过 ref 拿到组件实例后可调用 focus / blur / increase / decrease / getValue / setValue 6 个方法,常用于配合外部按钮操控。
货币输入场景
precision=2 + step=0.01 + min=0 + placeholder="¥ 0.00" 是常见的金额输入组合。
正则限制 reg
reg 接受 RegExp 或字符串,输入时不匹配的字符会被过滤;常用于「只允许正整数」「只允许非负数」之类的约束。
关闭悬浮发光
show-glow-style="false" 关闭 hover / focus 时的发光描边,融入更克制的视觉风格。
Variants
录入组件统一 variant 形态。四档:outlined(默认)/ filled / borderless / underlined。
校验状态 status
status='error' | 'warning' 控制边框 / focus 阴影色。Form 联动会自动透传 —— 放进 <c-form-item> 内校验失败时自动加 --status-error 类。change / blur 都会触发 FormItem 校验。
InputNumber参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| v-model | number | undefined | undefined | 绑定值 |
| step | number | 1 | 计数器步长 |
| placeholder | string | '' | 输入框占位文本 |
| max | number | Infinity | 设置计数器允许的最大值 |
| min | number | -Infinity | 设置计数器允许的最小值 |
| disabled | boolean | false | 是否禁用计数器 |
| readonly | boolean | false | 是否只读 |
| precision | number | undefined | 数值精度 |
| size | 'large' | 'default' | 'small' | 'default' | 输入框尺寸 |
| controls | boolean | true | 是否显示控制按钮 |
| controls-position | 'both' | 'right' | 'both' | 控制按钮位置 |
| allow-empty | boolean | false | 是否允许空值 |
| show-glow-style | boolean | true | 是否显示悬浮发光效果 |
| reg | RegExp | string | undefined | 输入限制的正则表达式,不匹配的字符会被过滤 |
| variant | 'outlined' | 'filled' | 'borderless' | 'underlined' | 'outlined' | 录入组件统一形态 |
| status | '' | 'error' | 'warning' | '' | 校验状态,Form 联动会自动透传 |
InputNumber事件
| 事件名 | 回调参数 | 说明 |
|---|---|---|
| change | (currentVal: number | undefined, oldVal: number | undefined) | 绑定值被改变时触发 |
| blur | (event: FocusEvent) | 在 Input 失去焦点时触发 |
| focus | (event: FocusEvent) | 在 Input 获得焦点时触发 |
| input | (currentValue: number | undefined) | 在 Input 值改变时触发 |
InputNumber方法
通过 ref 调用:
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| focus | 使 input 获取焦点 | — | void |
| blur | 使 input 失去焦点 | — | void |
| increase | 按 step 增加一次 | — | void |
| decrease | 按 step 减少一次 | — | void |
| getValue | 获取当前值 | — | number | undefined |
| setValue | 设置值(受 min/max/精度约束) | number | undefined | void |