Input Number 数字输入框 仅允许输入标准的数字值，可定义范围
基础用法 要使用它，只需要在
TSJSvue
隐藏源代码TIP
当输入无效的字符串到输入框时，由于错误，输入值将把 NaN 导入到上层
禁用状态 disabled属性接受一个 Boolean，设置为true即可禁用整个组件。，如果你只需要控制数值在某一范围内，可以设置 min 属性和 max 属性，默认情况下，最小值是 Number.MIN_SAFE_INTEGER。
TSJSvue
隐藏源代码步进 允许定义递增递减的步进控制
设置 step 属性可以控制步长。
TSJSvue
隐藏源代码严格步进 step-strictly属性接受一个Boolean。如果这个属性被设置为 true，则只能输入步进的倍数。
TSJSvue
隐藏源代码精度 设置 precision 属性可以控制数值精度，接收一个 Number。
TSJSvue
隐藏源代码TIP
precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。
不同的输入框尺寸 使用 size 属性额外配置尺寸，可选的尺寸大小为：large 或 small
TSJSvue
隐藏源代码按钮位置 设置 controls-position 属性可以控制按钮位置。
TSJSvue
v-model="num" :min="1" :max="10" controls-position="right" size="large" @change="handleChange" /> v-model="num" :min="1" :max="10" controls-position="right" @change="handleChange" /> v-model="num" :min="1" :max="10" size="small" controls-position="right" @change="handleChange" />
隐藏源代码自定义图标 2.6.3 使用 decrease-icon 和 increase-icon 设置自定义图标。
TSJSvue
隐藏源代码带前缀和后缀2.8.4 使用前缀和标名后缀。
￥RMBTSJSvue
￥
RMB
隐藏源代码TIP
为了确保精度，输入的数值被限制在 Number.MIN_SAFE_INTEGER 到 Number.MAX_SAFE_INTEGER 之间。
Formatter 2.14.0 使用 formatter 来显示值，通常会同时配合 parser 一起使用。
当设置了 formatter 时，内部输入框的 type 会变为 text，从而允许输入非数字字符。 组件内部使用 Number.parseFloat 处理输入：解析成功时，将解析后的数值写入 model-value；当解析结果为 NaN 时，将 model-value 设为 null。
TSJSvue
v-model="input" :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="(value) => value.replace(/\$\s?|(,*)/g, '')" /> 隐藏源代码API Attributes 属性名说明类型默认值model-value / v-model选中项绑定值number / null—min设置计数器允许的最小值numberNumber.MIN_SAFE_INTEGERmax设置计数器允许的最大值numberNumber.MAX_SAFE_INTEGERstep计数器步长number1step-strictly是否只能输入 step 的倍数booleanfalseprecision数值精度number—size计数器尺寸enumdefaultreadonly 2.2.16原生 readonly 属性，是否只读booleanfalsedisabled是否禁用状态booleanfalsecontrols是否使用控制按钮booleantruecontrols-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是否触发表单验证booleantruelabel a11y deprecated等价于原生 input aria-label 属性string—inputmode 2.10.3等价于原生 input inputmode 属性string—align 2.10.5内部输入文本对齐enum'center'disabled-scientific 2.10.5禁用科学计数法的输入（例如输入 'e'）booleanfalsetabindex 2.14.0输入框的 tabindexstring / number0formatter 2.14.0指定输入值的格式Function:::parser 2.14.0指定从格式化输入中提取的值Function—Slots 插槽名说明decrease-icon 2.6.3自定义输入框按钮减少图标increase-icon 2.6.3自定义输入框按钮增加图标prefix 2.8.4输入框头部内容suffix 2.8.4输入框尾部内容Events 名称说明类型change绑定值被改变时触发Functionblur在组件 Input 失去焦点时触发Functionfocus在组件 Input 获得焦点时触发FunctionExposes 名称详情类型focus使 input 组件获得焦点Functionblur使 input 组件失去焦点Function源代码 组件 • 样式 • 文档 贡献者