数字输入框
特性
- 完整的键盘导航。
- 受控或非受控。
- 支持按钮长按和滚轮事件。
- 支持不同区域设置的数字系统。
- 可自定义的格式。
安装
安装数字包。
$ npm add @internationalized/number从命令行安装此组件。
$ npm add reka-ui结构
导入所有部分并将其组合。
<script setup>
import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from 'reka-ui'
</script>
<template>
<NumberFieldRoot>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldRoot>
</template>API 参考
根
包含数字输入框的所有部分。当在 form 中使用时，也会渲染一个 input 以确保事件正确传播。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | Component此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
defaultValue | 数字 | |
disabled | 布尔值当为 | |
disableWheelChange | 布尔值当为 | |
formatOptions | NumberFormatOptions数字输入框中显示值的格式化选项。这也影响用户可以输入的字符。 | |
id | string元素的 ID | |
invertWheelChange | 布尔值当为 | |
locale | string用于日期格式化的区域设置 | |
max | 数字输入允许的最大值。 | |
min | 数字输入允许的最小值。 | |
modelValue | number | null | |
name | string字段的名称。随其所属的表单一起作为名称/值对提交。 | |
readonly | 布尔值当为 | |
required | 布尔值当为 | |
step | 1 | 数字输入值每次增加或减少“步长”的量。 |
stepSnapping | true | 布尔值当为 |
| 事件触发 | 载荷 |
|---|---|
update:modelValue | [val: number]值改变时调用的事件处理程序。 |
| 插槽（默认） | 载荷 |
|---|---|
modelValue | number | undefined |
textValue | string |
| 数据属性 | 值 |
|---|---|
[data-disabled] | 禁用时存在 |
输入框
输入框
根据值和格式选项渲染文本值的输入组件。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'input' | AsTag | Component此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 |
| 数据属性 | 值 |
|---|---|
[data-disabled] | 禁用时存在 |
增加
增加值的按钮。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'button' | AsTag | Component此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
disabled | 布尔值 |
| 数据属性 | 值 |
|---|---|
[data-pressed] | 按下时存在 |
[data-disabled] | 禁用时存在 |
减少
减少值的按钮。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'button' | AsTag | Component此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
disabled | 布尔值 |
| 数据属性 | 值 |
|---|---|
[data-pressed] | 按下时存在 |
[data-disabled] | 禁用时存在 |
示例
小数
支持 Intl.NumberFormat 支持的所有选项，包括最小和最大小数位数、符号显示、分组分隔符等配置。
<template>
<NumberFieldRoot
:default-value="5"
:format-options="{
signDisplay: 'exceptZero',
minimumFractionDigits: 1,
}"
>
…
</NumberFieldRoot>
</template>百分比
您可以将 formatOptions.style 设置为 percent 以将值视为百分比。在此模式下，您需要手动将步长设置为 0.01 以允许适当的步进大小。
<template>
<NumberFieldRoot
:default-value="0.05"
:step="0.01"
:format-options="{
style: 'percent',
}"
>
…
</NumberFieldRoot>
</template>货币
您可以将 formatOptions.style 设置为 currency 以将值视为货币值。还必须传入 currency 选项以设置货币代码（例如，USD）。
如果您需要允许用户更改货币，应在数字输入框旁边包含一个单独的下拉菜单。数字输入框本身不会从用户输入中确定货币。
<template>
<NumberFieldRoot
:default-value="5"
:format-options="{
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code',
currencySign: 'accounting',
}"
>
…
</NumberFieldRoot>
</template>无障碍性
键盘交互
| 键 | 描述 |
|---|---|
向上箭头 | 增加值 |
向下箭头 | 减少值 |
Page Up | 按10倍比例增加值 |
Page Down | 按10倍比例减少值 |
Home | 将值设置为最小值（如果提供了 min） |
End | 将值设置为最大值（如果提供了 max） |