Input Number 数字输入框

仅允许输入标准的数字值,可定义范围

基础用法

要使用它,只需要在 <el-input-number> 元素中使用 v-model 绑定变量即可,变量的初始值即为默认值。

TIP

当输入无效的字符串到输入框时,由于错误,输入值将把 NaN 导入到上层

禁用状态

disabled属性接受一个 Boolean,设置为true即可禁用整个组件。 ,如果你只需要控制数值在某一范围内,可以设置 min 属性和 max 属性, 默认最小值为 0

步进

允许定义递增递减的步进控制

设置 step 属性可以控制步长。

严格步进

step-strictly属性接受一个Boolean。 如果这个属性被设置为 true,则只能输入步进的倍数。

精度

设置 precision 属性可以控制数值精度,接收一个 Number

TIP

precision 的值必须是一个非负整数,并且不能小于 step 的小数位数。

不同的输入框尺寸

使用 size 属性额外配置尺寸,可选的尺寸大小为:largesmall

按钮位置

设置 controls-position 属性可以控制按钮位置。

自定义图标 2.6.3

使用 decrease-iconincrease-icon 设置自定义图标。

带前缀和后缀2.8.4

使用前缀和标名后缀。

RMB

API

Attributes

属性名说明类型默认值
model-value / v-model选中项绑定值number
min设置计数器允许的最小值number-Infinity
max设置计数器允许的最大值numberInfinity
step计数器步长number1
step-strictly是否只能输入 step 的倍数booleanfalse
precision数值精度number
size计数器尺寸enumdefault
readonly 2.2.16原生 readonly 属性,是否只读booleanfalse
disabled是否禁用状态booleanfalse
controls是否使用控制按钮booleantrue
controls-position控制按钮位置enum
name等价于原生 input name 属性string
aria-label a11y 2.7.2等价于原生 input aria-label 属性string
placeholder等价于原生 input placeholder 属性string
id等价于原生 input id 属性string
value-on-clear 2.2.0当输入框被清空时显示的值number / null / enum
validate-event是否触发表单验证booleantrue
label a11y deprecated等价于原生 input aria-label 属性string

Slots

事件名说明
decrease-icon 2.6.3自定义输入框按钮减少图标
increase-icon 2.6.3自定义输入框按钮增加图标
prefix 2.8.4输入框头部内容
suffix 2.8.4输入框尾部内容

Events

名称说明类型
change绑定值被改变时触发Function
blur在组件 Input 失去焦点时触发Function
focus在组件 Input 获得焦点时触发Function

Exposes

名称详情类型
focus使 input 组件获得焦点Function
blur使 input 组件失去焦点Function

源代码

组件样式文档

贡献者