InputNumber 数字输入框
规则
基础示例
Props 配置示例
设置最小值和最大值
设置精度和步长
禁用状态
尺寸对比(小 / 中 / 大)
Events 事件示例
监听数值变化
联动计算总价
完整配置项:TDesign_InputNumber
value:number | string
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| align | 文本位置 | left | center | right | - | - |
| allowInputOverLimit | 是否允许输入超出 min/max(失焦时矫正) | boolean | true | - |
| autoWidth | 宽度随内容自适应 | boolean | false | - |
| decimalPlaces | 小数位数 | number | { enableRound: boolean; places: number } | - | - |
| disabled | 禁用 | boolean | - | - |
| format | 格式化展示值 | (value, context?: { fixedNumber? }) => InputNumberValue | - | - |
| inputProps | 透传 Input 属性 | InputProps | - | - |
| label | 左侧文本 | string | TNode | - | - |
| largeNumber | 是否作为大数(字符串)使用 | boolean | false | - |
| max | 最大值 | string | number | Infinity | - |
| min | 最小值 | string | number | -Infinity | - |
| placeholder | 占位符 | string | - | - |
| readonly | 只读 | boolean | - | - |
| size | 尺寸 | small | medium | large | medium | - |
| status | 状态 | default | success | warning | error | default | - |
| step | 步长 | string | number | 1 | - |
| suffix | 后置内容 | string | TNode | - | - |
| theme | 按钮布局 | column | row | normal | row | - |
| tips | 下方提示文本 | string | TNode | - | - |
| value | 数字值 | number | string | - | - |
| defaultValue | 非受控值 | number | string | - | - |
Events
| 事件 | 说明 | 类型 | 版本 |
|---|---|---|---|
| blur | 失去焦点 | (value: InputNumberValue, context: { e: FocusEvent }) => void | - |
| change | 值变化 | (value, context: { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent | CompositionEvent }) => void | - |
| enter | 回车 | (value: InputNumberValue, context: { e: KeyboardEvent }) => void | - |
| focus | 获得焦点 | (value: InputNumberValue, context: { e: FocusEvent }) => void | - |
| keydown | 键盘按下 | (value: InputNumberValue, context: { e: KeyboardEvent }) => void | - |
| keypress | 按下字符键 | (value: InputNumberValue, context: { e: KeyboardEvent }) => void | - |
| keyup | 释放键盘 | (value: InputNumberValue, context: { e: KeyboardEvent }) => void | - |
| validate | 超出最大/最小值 | (context: { error?: 'exceed-maximum' | 'below-minimum' }) => void | - |


