Skip to content

InputNumber 数字输入框

数字输入框组件,用于输入数字类型的数据。

何时使用

当需要获取标准数值时。

基本使用

基础的数字输入框用法。

禁用状态

通过 disabled 属性指定是否禁用 input 组件。

只读状态

readonly 让数值不可编辑但仍可读出 / focus,常用于「计算结果展示但允许 copy」的场景。

数值范围

使用 minmax 属性限制数值范围。

步数

使用 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-modelnumber | undefinedundefined绑定值
stepnumber1计数器步长
placeholderstring''输入框占位文本
maxnumberInfinity设置计数器允许的最大值
minnumber-Infinity设置计数器允许的最小值
disabledbooleanfalse是否禁用计数器
readonlybooleanfalse是否只读
precisionnumberundefined数值精度
size'large' | 'default' | 'small''default'输入框尺寸
controlsbooleantrue是否显示控制按钮
controls-position'both' | 'right''both'控制按钮位置
allow-emptybooleanfalse是否允许空值
show-glow-stylebooleantrue是否显示悬浮发光效果
regRegExp | stringundefined输入限制的正则表达式,不匹配的字符会被过滤
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
increasestep 增加一次void
decreasestep 减少一次void
getValue获取当前值number | undefined
setValue设置值(受 min/max/精度约束)number | undefinedvoid

Released under the MIT License.