Radix Vue

外观

数字输入框 ​

透明度
数字输入框允许用户输入数字，并使用步进器按钮增减值。
vue
<script setup lang="ts">
import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'
</script>

<template>
  <NumberFieldRoot
    id="age"
    class="text-sm text-white"
    :min="0"
    :default-value="18"
  >
    <label for="age">Age</label>
    <div class="mt-1 flex items-center border bg-blackA7 border-blackA9 rounded-md">
      <NumberFieldDecrement class="p-2 disabled:opacity-20">
        <Icon icon="radix-icons:minus" />
      </NumberFieldDecrement>
      <NumberFieldInput class="bg-transparent w-20 tabular-nums focus:outline-0 p-1" />
      <NumberFieldIncrement class="p-2 disabled:opacity-20">
        <Icon icon="radix-icons:plus" />
      </NumberFieldIncrement>
    </div>
  </NumberFieldRoot>
</template>

功能 ​

  • 完整键盘导航。
  • 可以是受控或不受控的。
  • 支持按钮按住和滚轮事件。
  • 支持不同区域设置的数字系统。
  • 可定制的格式。

安装 ​

安装数字包。

sh
$ npm add @internationalized/number

从命令行安装组件。

sh
$ npm add radix-vue

解剖 ​

导入所有部分并将它们拼凑在一起。

vue
<script setup>
import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from 'radix-vue'
</script>

<template>
  <NumberFieldRoot>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldRoot>
</template>

API 参考 ​

根 ​

包含数字输入框的所有部分。当在 form 中使用时，还会渲染一个 input，以确保事件正确传播。

道具默认值类型
as
'div'
AsTag | 组件

此组件应渲染为的元素或组件。可以被 asChild 覆盖。

asChild
布尔值

将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。

阅读我们的 组合 指南以了解更多详细信息。

defaultValue
数字
disabled
布尔值

当 true 时，阻止用户与数字输入框交互。

formatOptions
NumberFormatOptions

数字输入框中显示值的格式化选项。这也影响用户可以键入的字符。

id
字符串

元素的 ID

locale
'en-US'
字符串

用于格式化日期的区域设置

max
数字

输入允许的最大值。

min
数字

输入允许的最小值。

modelValue
数字
name
字符串

数字输入框的名称。作为名称/值对的一部分，与其所属的表单一起提交。

required
布尔值

当 true 时，表示用户必须在提交所属表单之前设置值。

step
1
数字

每次增量或减量“刻度”时输入值变化的量。

发射有效负载
update:modelValue
[val: number]

值更改时调用的事件处理程序。

插槽 (默认)有效负载
modelValue
数字
textValue
字符串
数据属性值
[data-disabled]禁用时出现

输入 ​

输入

基于值和格式选项渲染文本值的输入组件。

道具默认值类型
as
'input'
AsTag | 组件

此组件应渲染为的元素或组件。可以被 asChild 覆盖。

asChild
布尔值

将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。

阅读我们的 组合 指南以了解更多详细信息。

数据属性值
[data-disabled]禁用时出现

增量 ​

增加值的按钮。

道具默认值类型
as
'button'
AsTag | 组件

此组件应渲染为的元素或组件。可以被 asChild 覆盖。

asChild
布尔值

将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。

阅读我们的 组合 指南以了解更多详细信息。

disabled
布尔值
数据属性值
[data-pressed]按下时出现
[data-disabled]禁用时出现

减量 ​

减少值的按钮。

道具默认值类型
as
'button'
AsTag | 组件

此组件应渲染为的元素或组件。可以被 asChild 覆盖。

asChild
布尔值

将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。

阅读我们的 组合 指南以了解更多详细信息。

disabled
布尔值
数据属性值
[data-pressed]按下时出现
[data-disabled]禁用时出现

示例 ​

小数 ​

支持 Intl.NumberFormat 支持的所有选项，包括最小和最大小数位数、符号显示、分组分隔符等的配置。

vue
<template>
  <NumberFieldRoot
    :default-value="5"
    :format-options="{
      signDisplay: 'exceptZero',
      minimumFractionDigits: 1,
    }"
  >
    …
  </NumberFieldRoot>
</template>

百分比 ​

您可以将 formatOptions.style 设置为 percent，将值视为百分比。您需要手动将步长设置为 0.01，以允许在这种模式下使用适当的步长大小。

vue
<template>
  <NumberFieldRoot
    :default-value="0.05"
    :step="0.01"
    :format-options="{
      style: 'percent',
    }"
  >
    …
  </NumberFieldRoot>
</template>

货币 ​

您可以将 formatOptions.style 设置为 currency，将值视为货币值。还必须传递 currency 选项以设置货币代码（例如，USD）。

如果您需要允许用户更改货币，您应该在数字输入框旁边包含一个单独的下拉菜单。数字输入框本身不会从用户输入中确定货币。

vue
<template>
  <NumberFieldRoot
    :default-value="5"
    :format-options="{
      style: 'currency',
      currency: 'EUR',
      currencyDisplay: 'code',
      currencySign: 'accounting',
    }"
  >
    …
  </NumberFieldRoot>
</template>

无障碍性 ​

符合 Spinbutton WAI-ARIA 设计模式。

键盘交互 ​

键描述
向上箭头
增加值
向下箭头
减少值
Page Up
将值增加 10 倍
Page Down
将值减少 10 倍
主页
将值设置为最小值（如果提供了 min）
结束
将值设置为最大值（如果提供了 max）