Input Number 数字输入框

步进器形数字输入框用于按固定步长快速调节数值，同时支持手动输入。组件提供左右操作和右侧操作两种布局，尺寸分为大 40px、中 32px、小 24px。

import { createApp } from 'vue'
import { ElInputNumber } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElInputNumber)

规范

使用时必须设置最小值、最大值与步长，超出范围时对应方向按钮不可用。
长按增减按钮支持连续增减。
同一表单内保持尺寸一致，避免大、中、小混排。

基础用法

禁用状态

步进

通过 step 定义每次递增或递减的步长。

严格步进

精度

precision 用于控制小数位数，需与 step 的小数精度保持一致。

不同的输入框尺寸

使用 size 属性配置尺寸：large 对应大尺寸，默认尺寸对应中尺寸，small 对应小尺寸。

按钮位置

自定义图标

带前缀和后缀

前缀和后缀用于展示币种、单位等辅助信息。

格式化

通过 formatter 和 parser 属性来格式化输入框中显示的值。formatter 用于将实际值转换为显示值，parser 用于将显示值转换回实际值。

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	number / null	—
min	设置计数器允许的最小值	number	Number.MIN_SAFE_INTEGER
max	设置计数器允许的最大值	number	Number.MAX_SAFE_INTEGER
step	计数器步长	number	1
step-strictly	是否只能输入 step 的倍数	boolean	false
precision	数值精度	number	—
size	计数器尺寸	enum	default
readonly	原生 `readonly` 属性，是否只读	boolean	false
disabled	是否禁用状态	boolean	false
controls	是否使用控制按钮	boolean	true
controls-position	控制按钮位置	enum	—
name	等价于原生 input `name` 属性	string	—
aria-label a11y	等价于原生 input `aria-label` 属性	string	—
placeholder	等价于原生 input `placeholder` 属性	string	—
id	等价于原生 input `id` 属性	string	—
value-on-clear	当输入框被清空时显示的值	number / null / enum	—
validate-event	是否触发表单验证	boolean	true
tabindex	input 的 tabindex	string / number	—
formatter	指定输入框展示值的格式	Function	—
parser	指定从格式化器输入中提取的值	Function	—
label a11y deprecated	等价于原生 input `aria-label` 属性	string	—
inputmode	等价于原生 input `inputmode` 属性	string	—
align	内部输入文本对齐	enum	'center'
disabled-scientific	禁用科学计数法的输入（例如输入 'e'）	boolean	false

Slots

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

Events

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

Exposes

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

Input Number 数字输入框 ​

规范 ​

基础用法 ​

禁用状态 ​

步进 ​

严格步进 ​

精度 ​

不同的输入框尺寸 ​

按钮位置 ​

自定义图标 ​

带前缀和后缀 ​

格式化 ​

API ​

Attributes ​

Slots ​

Events ​

Exposes ​