Skip to content

InputNumber 数字输入框

规则

基础示例

Props 配置示例

设置最小值和最大值

设置精度和步长

禁用状态

尺寸对比(小 / 中 / 大)

Events 事件示例

监听数值变化

联动计算总价

完整配置项:TDesign_InputNumber

valuenumber | string

Props

参数说明类型默认值版本
align文本位置left | center | right--
allowInputOverLimit是否允许输入超出 min/max(失焦时矫正)booleantrue-
autoWidth宽度随内容自适应booleanfalse-
decimalPlaces小数位数number | { enableRound: boolean; places: number }--
disabled禁用boolean--
format格式化展示值(value, context?: { fixedNumber? }) => InputNumberValue--
inputProps透传 Input 属性InputProps--
label左侧文本string | TNode--
largeNumber是否作为大数(字符串)使用booleanfalse-
max最大值string | numberInfinity-
min最小值string | number-Infinity-
placeholder占位符string--
readonly只读boolean--
size尺寸small | medium | largemedium-
status状态default | success | warning | errordefault-
step步长string | number1-
suffix后置内容string | TNode--
theme按钮布局column | row | normalrow-
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-

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用