Lzh on GitHub

Pin Input

一系列单字符的字母数字输入。
<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'reka-ui'
import { ref } from 'vue'

const value = ref<string[]>([])
function handleComplete(e: string[]) {
  // eslint-disable-next-line no-alert
  alert(e.join(''))
}
</script>

<template>
  <div>
    <Label
      for="otp"
      class="text-stone-700 dark:text-white"
    >
      Pin Input
    </Label>
    <PinInputRoot
      id="otp"
      v-model="value"
      placeholder="○"
      class="flex gap-2 items-center mt-1"
      @complete="handleComplete"
    >
      <PinInputInput
        v-for="(id, index) in 5"
        :key="id"
        :index="index"
        class="w-10 h-10 bg-white rounded-lg text-center shadow-sm border text-green10 placeholder:text-mauve8 focus:shadow-[0_0_0_2px] focus:shadow-stone-800 outline-none"
      />
    </PinInputRoot>
  </div>
</template>

特性 (Features)

  • 完整的键盘导航。
  • 可控或非控。
  • 支持从剪贴板粘贴。
  • 当输入框被填满时发出事件。

安装 (Installation)

从命令行安装组件。

$ npm add reka-ui

结构 (Anatomy)

导入所有部件并组装它们。

<script setup>
import { PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot>
    <PinInputInput />
  </PinInputRoot>
</template>

API 参考 (API Reference)

根 (Root)

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

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
defaultValue(string[] | number[])[](string[] | number[])[]密码输入框初始渲染时的默认值。当您不需要控制其选中状态时使用。
dir'ltr' | 'rtl'组合框的阅读方向（如果适用）。如果省略，则全局继承自 ConfigProvider 或假定为 LTR（从左到右）阅读模式。
disabledboolean当 true 时，阻止用户与密码输入框交互。
idstring元素的 ID
maskboolean当 true 时，密码输入框将被视为密码。
modelValuestring[] | number[] | null密码输入框的受控选中状态。可以通过 v-model 绑定。
namestring字段的名称。作为名称/值对的一部分随其所属的表单一起提交。
otpboolean当 true 时，移动设备将自动从消息或剪贴板检测 OTP，并启用自动完成字段。
placeholder''string用于空密码输入框的占位符字符。
requiredboolean当 true 时，表示用户必须在提交所属表单之前设置值。
type'text' as any'number' | 'text'输入框的输入类型。

发送事件

事件Payload描述
complete[value: string[] | number[]]
update:modelValue[value: string[] | number[]]值更改时调用的事件处理程序。

默认插槽

插槽参数插槽参数类型描述
modelValuestring[]当前输入值

数据属性 (Data Attributes)

数据属性值
[data-complete]完成时存在
[data-disabled]禁用时存在

输入 (Input)

密码输入的输入字段。您可以添加任意数量的输入。

属性默认值类型描述
as'input'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
disabledboolean当 true 时，阻止用户与密码输入框交互。
index*number此输入绑定到的值的位置。

数据属性 (Data Attributes)

数据属性值
[data-complete]完成时存在
[data-disabled]禁用时存在

示例 (Examples)

OTP 模式 (OTP mode)

您可以通过将 otp 设置为 true 来将密码输入设置为 OTP 模式。

<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot v-model="value" otp>
    …
  </PinInputRoot>
</template>

数字模式 (Numeric mode)

您可以通过将 type 设置为 number 来将密码输入设置为只接受 number 类型。

<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot v-model="value" type="number">
    …
  </PinInputRoot>
</template>

可访问性 (Accessibility)

键盘交互 (Keyboard Interactions)

按键描述
ArrowLeft聚焦到上一个输入框。
ArrowRight聚焦到下一个输入框。
Home聚焦到第一个输入框。
End聚焦到最后一个输入框。
Backspace删除当前输入框的值。如果输入框为空，则移动到上一个输入框并删除其值。
Delete删除当前输入框的值。
Ctrl + V将剪贴板内容粘贴到密码输入框中。如果剪贴板中的字符数等于或超过输入框的数量，则从第一个输入框开始粘贴内容。否则，内容从当前输入框开始粘贴。