11<div align =" center " >
22 <h1 >@rc-component/input-number</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
54 <p >🔢 React 数字输入组件,支持格式化、精度、步进和键盘交互。</p >
65</div >
76
1716
1817## 特性
1918
20- - Controlled and uncontrolled numeric input modes.
21- - Decimal precision, custom parser, formatter, and decimal separator support.
22- - Keyboard stepping, mouse wheel stepping, and custom step handlers.
23- - Prefix, suffix, spinner controls, and semantic ` classNames ` / ` styles ` slots.
24- - TypeScript generic value typing for number and string based value flows.
19+ - 受控和非受控数字输入模式。
20+ - 小数精度、自定义解析器、格式化程序和小数分隔符支持。
21+ - 支持键盘步进、鼠标滚轮步进和自定义步进处理。
22+ - 支持前缀、后缀、步进控制器和语义化 ` classNames ` / ` styles ` 插槽。
23+ - TypeScript 通用值类型用于基于数字和字符串的值流。
2524
2625## 安装
2726
@@ -58,48 +57,48 @@ npm install
5857npm start
5958```
6059
61- Online preview: https://input-number.vercel.app/
60+ 在线预览: https://input-number.vercel.app/
6261
6362## API
6463
6564### InputNumber
6665
6766| 参数 | 类型 | 默认值 | 说明 |
6867| --- | --- | --- | --- |
69- | autoFocus | ` boolean ` | ` false ` | Focus the input when mounted. |
70- | changeOnBlur | ` boolean ` | ` true ` | Commit value changes on blur. |
71- | changeOnWheel | ` boolean ` | ` false ` | Allow value changes from the mouse wheel. |
72- | className | ` string ` | - | Class name for the root element. |
73- | classNames | ` Partial<Record<SemanticName, string>> ` | - | Semantic class names for input-number slots. |
74- | controls | ` boolean ` | ` true ` | Show increment and decrement controls. |
75- | decimalSeparator | ` string ` | - | Decimal separator used by the display formatter. |
76- | defaultValue | ` T ` | - | Initial value. |
77- | disabled | ` boolean ` | ` false ` | Disable the input. |
78- | downHandler | ` ReactNode ` | - | Custom decrement control. |
79- | formatter | ` (value: T \| undefined, info: { userTyping: boolean; input: string }) => string ` | - | Format the displayed value. |
80- | inputMode | ` string ` | - | Native input ` inputMode ` attribute. |
81- | keyboard | ` boolean ` | ` true ` | Enable keyboard stepping. |
82- | max | ` T ` | - | Maximum value. |
83- | min | ` T ` | - | Minimum value. |
84- | mode | ` 'input' \| 'spinner' ` | ` input ` | Render mode. |
85- | parser | ` (displayValue: string \| undefined) => T ` | - | Parse the displayed value back to a value. |
68+ | autoFocus | ` boolean ` | ` false ` | 安装后聚焦输入。 |
69+ | changeOnBlur | ` boolean ` | ` true ` | 提交模糊值的变化。 |
70+ | changeOnWheel | ` boolean ` | ` false ` | 允许通过鼠标滚轮更改值。 |
71+ | className | ` string ` | - | 根元素的className。 |
72+ | classNames | ` Partial<Record<SemanticName, string>> ` | - | 输入数字槽的语义className称。 |
73+ | controls | ` boolean ` | ` true ` | 显示增量和减量控件。 |
74+ | decimalSeparator | ` string ` | - | 显示格式化程序使用的小数分隔符。 |
75+ | defaultValue | ` T ` | - | 初始值。 |
76+ | disabled | ` boolean ` | ` false ` | 禁用输入。 |
77+ | downHandler | ` ReactNode ` | - | 自定义减量控制。 |
78+ | formatter | ` (value: T \| undefined, info: { userTyping: boolean; input: string }) => string ` | - | 设置显示值的格式。 |
79+ | inputMode | ` string ` | - | 本机输入 ` inputMode ` 属性。 |
80+ | keyboard | ` boolean ` | ` true ` | 启用键盘步进。 |
81+ | max | ` T ` | - | 最大值。 |
82+ | min | ` T ` | - | 最小值。 |
83+ | mode | ` 'input' \| 'spinner' ` | ` input ` | 渲染模式。 |
84+ | parser | ` (displayValue: string \| undefined) => T ` | - | 将显示的值解析回一个值。 |
8685| precision | ` number ` | - | Display precision. |
87- | prefix | ` ReactNode ` | - | Prefix content. |
88- | prefixCls | ` string ` | ` rc-input-number ` | Class name prefix. |
89- | readOnly | ` boolean ` | ` false ` | Mark the input as read only. |
86+ | 前缀 | ` ReactNode ` | - | 前缀内容。 |
87+ | prefixCls | ` string ` | ` rc-input-number ` | className前缀。 |
88+ | readOnly | ` boolean ` | ` false ` | 将输入标记为只读。 |
9089| step | ` number \| string ` | ` 1 ` | Step size. |
91- | stringMode | ` boolean ` | ` false ` | Keep values as strings for high precision decimals. |
92- | style | ` React.CSSProperties ` | - | Inline styles for the root element. |
93- | styles | ` Partial<Record<SemanticName, React.CSSProperties>> ` | - | Semantic styles for input-number slots. |
94- | suffix | ` ReactNode ` | - | Suffix content. |
95- | upHandler | ` ReactNode ` | - | Custom increment control. |
96- | value | ` T \| null ` | - | Controlled value. |
97- | onChange | ` (value: T \| null) => void ` | - | Triggered when the committed value changes. |
98- | onInput | ` (text: string) => void ` | - | Triggered when the raw input text changes. |
99- | onPressEnter | ` React.KeyboardEventHandler<HTMLInputElement> ` | - | Triggered when Enter is pressed. |
100- | onStep | ` (value: T, info: { offset: number \| string; type: 'up' \| 'down'; emitter: 'handler' \| 'keyboard' \| 'wheel' }) => void ` | - | Triggered when the value changes by step. |
101-
102- Native input attributes such as ` id ` , ` name ` , ` placeholder ` , ` required ` , ` readOnly ` , and ` tabIndex ` are also supported unless explicitly overridden above.
90+ | stringMode | ` boolean ` | ` false ` | 将值保留为字符串以获得高精度小数。 |
91+ | 风格 | ` React.CSSProperties ` | - | 根元素的内联样式。 |
92+ | styles | ` Partial<Record<SemanticName, React.CSSProperties>> ` | - | 输入数字槽的语义样式。 |
93+ | 后缀 | ` ReactNode ` | - | 后缀内容。 |
94+ | upHandler | ` ReactNode ` | - | 自定义增量控制。 |
95+ | 价值 | ` T \| null ` | - | 受控值。 |
96+ | onChange | ` (value: T \| null) => void ` | - | 当提交的值改变时触发。 |
97+ | onInput | ` (text: string) => void ` | - | 当原始输入文本更改时触发。 |
98+ | onPressEnter | ` React.KeyboardEventHandler<HTMLInputElement> ` | - | 当按下 Enter 时触发。 |
99+ | onStep | ` (value: T, info: { offset: number \| string; type: 'up' \| 'down'; emitter: 'handler' \| 'keyboard' \| 'wheel' }) => void ` | - | 当值逐步变化时触发。 |
100+
101+ 除非上方明确覆盖,也支持 ` id ` , ` name ` , ` placeholder ` , ` required ` , ` readOnly ` , and ` tabIndex ` 等原生 input 属性。
103102
104103### Ref
105104
@@ -114,16 +113,16 @@ ref.current?.blur();
114113
115114| 参数 | 类型 | 说明 |
116115| ------------- | --------------------------------------- | -------------------- |
117- | focus | ` (options?: InputFocusOptions) => void ` | Focus the input. |
118- | blur | ` () => void ` | Blur the input. |
119- | nativeElement | ` HTMLElement ` | Root native element. |
116+ | 重点 | ` (options?: InputFocusOptions) => void ` | 集中输入。 |
117+ | 模糊 | ` () => void ` | 模糊输入。 |
118+ | nativeElement | ` HTMLElement ` | 根原生元素。 |
120119
121- ## Keyboard And Wheel
120+ ## 键盘与滚轮
122121
123- - Arrow up and Arrow down change the value by ` step ` .
124- - ` Shift + Arrow ` changes the value by ` 10 * step ` .
125- - ` Ctrl ` / ` Command + Arrow ` changes the value by ` 0.1 * step ` .
126- - Mouse wheel changes are opt-in through ` changeOnWheel ` .
122+ - 上箭头和下箭头会按 ` step ` 改变数值。
123+ - ` Shift + Arrow ` 将值更改为 ` 10 * step ` 。
124+ - ` Ctrl ` / ` Command + Arrow ` 将值更改为 ` 0.1 * step ` 。
125+ - 鼠标滚轮改值需要通过 ` changeOnWheel ` 显式开启。
127126
128127## 本地开发
129128
@@ -142,11 +141,11 @@ npm run build
142141npm run prepublishOnly
143142```
144143
145- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
144+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
146145
147146## 许可证
148147
149- @rc-component/input-number is released under the [ MIT] ( ./LICENSE.md ) license.
148+ @rc-component/input-number 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
150149
151150[ npm-image ] : https://img.shields.io/npm/v/@rc-component/input-number.svg?style=flat-square
152151[ npm-url ] : https://npmjs.org/package/@rc-component/input-number
0 commit comments