仅允许输入标准的数字值，可定义范围
基础用法
要使用它，只需要在 <el-input-number> 元素中使用 v-model 绑定变量即可，变量的初始值即为默认值。
当输入无效的字符串到输入框时，由于错误，输入值将把 NaN 导入到上层
export function InputNumberBasic() { const [num, setNum] = useState<number | null>(1); return ( <ElInputNumber value={num} onChange={(current) => setNum(current)} min={1} max={10} /> );}
禁用状态
disabled属性接受一个 Boolean，设置为true即可禁用整个组件。，如果你只需要控制数值在某一范围内，可以设置 min 属性和 max 属性，默认情况下，最小值是 Number.MIN_SAFE_INTEGER。
export function InputNumberDisabled() { const [num] = useState<number | null>(1); return <ElInputNumber value={num} disabled />;}
步进
允许定义递增递减的步进控制
设置 step 属性可以控制步长。
export function InputNumberSteps() { const [num, setNum] = useState<number | null>(5); return <ElInputNumber value={num} onChange={setNum} step={2} />;}
严格步进
step-strictly属性接受一个Boolean。如果这个属性被设置为 true，则只能输入步进的倍数。
export function InputNumberStepStrictly() { const [num, setNum] = useState<number | null>(2); return <ElInputNumber value={num} onChange={setNum} step={2} stepStrictly />;}
精度
设置 precision 属性可以控制数值精度，接收一个 Number。
precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。
export function InputNumberPrecision() { const [num, setNum] = useState<number | null>(1); return ( <ElInputNumber value={num} onChange={setNum} precision={2} step={0.1} max={10} /> );}
不同的输入框尺寸
使用 size 属性额外配置尺寸，可选的尺寸大小为：large 或 small
export function InputNumberSize() { const [num1, setNum1] = useState<number | null>(1); const [num2, setNum2] = useState<number | null>(2); const [num3, setNum3] = useState<number | null>(3); return ( <div style={row}> <ElInputNumber value={num1} onChange={setNum1} size="large" /> <ElInputNumber value={num2} onChange={setNum2} /> <ElInputNumber value={num3} onChange={setNum3} size="small" /> </div> );}
按钮位置
设置 controls-position 属性可以控制按钮位置。
export function InputNumberControlled() { const [num, setNum] = useState<number | null>(1); return ( <div style={row}> <ElInputNumber value={num} onChange={setNum} min={1} max={10} controlsPosition="right" size="large" /> <ElInputNumber value={num} onChange={setNum} min={1} max={10} controlsPosition="right" /> <ElInputNumber value={num} onChange={setNum} min={1} max={10} controlsPosition="right" size="small" /> </div> );}
自定义图标 2.6.3
使用 decrease-icon 和 increase-icon 设置自定义图标。
export function InputNumberCustom() { const [num, setNum] = useState<number | null>(1); return ( <ElSpace direction="vertical"> <ElSpace> <ElInputNumber value={num} onChange={setNum} /> <ElInputNumber value={num} onChange={setNum} decreaseIcon={<ElIcon><ArrowDown /></ElIcon>} increaseIcon={<ElIcon><ArrowUp /></ElIcon>} /> </ElSpace> <ElSpace> <ElInputNumber value={num} onChange={setNum} controlsPosition="right" /> <ElInputNumber value={num} onChange={setNum} controlsPosition="right" decreaseIcon={<ElIcon><Minus /></ElIcon>} increaseIcon={<ElIcon><Plus /></ElIcon>} /> </ElSpace> </ElSpace> );}
带前缀和后缀2.8.4
使用前缀和标名后缀。
export function InputNumberWithPrefixSuffix() { const [num, setNum] = useState<number | null>(1); return ( <ElSpace> <ElInputNumber value={num} onChange={setNum} min={1} max={10} prefix={<span>￥</span>} /> <ElInputNumber value={num} onChange={setNum} min={1} max={10} suffix={<span>RMB</span>} /> </ElSpace> );}
使用 formatter 来显示值，通常会同时配合 parser 一起使用。
当设置了 formatter 时，内部输入框的 type 会变为 text，从而允许输入非数字字符。 组件内部使用 Number.parseFloat 处理输入：解析成功时，将解析后的数值写入 model-value；当解析结果为 NaN 时，将 model-value 设为 null。
export function InputNumberFormatter() { const [input, setInput] = useState<number | null>(10000); return ( <ElInputNumber value={input} onChange={setInput} formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") } parser={(value) => value.replace(/\$\s?|(,*)/g, "")} /> );}
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| value | 绑定值 | 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 | 原生 name | string | — |
| aria-label | 原生 aria-label | string | — |
| placeholder | 同原生 placeholder | string | — |
| id | 原生 id | string | — |
| value-on-clear | 输入框清空时赋的值 | number / null / enum | — |
| validate-event | 是否触发表单校验 | boolean | true |
| inputmode | 同原生 inputmode | string | — |
| align | 内部输入框的对齐方式 | enum | 'center' |
| disabled-scientific | 是否禁用科学计数法输入（如 'e'） | boolean | false |
| tabindex | 同原生 tabindex | string / number | 0 |
| formatter | 展示值的格式化函数 | Function | — |
| parser | 从格式化后的输入中还原值的函数 | Function | — |
| 事件名 | 说明 | 参数 |
|---|
| onChange | 值变化 | Function |
| onBlur | 内部输入框失焦 | Function |
| onFocus | 内部输入框聚焦 | Function |
| 插槽名 | 说明 | React 写法 |
|---|
| decrease-icon | 自定义减少按钮图标 | decreaseIcon |
| increase-icon | 自定义增加按钮图标 | increaseIcon |
| prefix | 内部输入框前缀 | prefix |
| suffix | 内部输入框后缀 | suffix |
| 名称 | 说明 | 类型 |
|---|
| focus | 使内部输入框获得焦点 | Function |
| blur | 使内部输入框失去焦点 | Function |
