Pin 输入

Alpha

一系列单字符的字母数字输入。

Pin 输入

<script setup lang="ts">
import { ref } from 'vue'
import { Label, PinInputInput, PinInputRoot } from 'radix-vue'

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

<template>
  <div>
    <Label
      for="pin-input"
      class="text-white"
    >Pin Input</Label>
    <PinInputRoot
      id="pin-input"
      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 text-center shadow-lg text-green10 placeholder:text-mauve8 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-white"
      />
    </PinInputRoot>
  </div>
</template>

功能

• 完整的键盘导航。
• 可以是受控的或不受控的。
• 支持从剪贴板粘贴
• 输入完成时发出事件。

安装

从命令行安装组件。

$ npm add radix-vue

解剖

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

<script setup>
import { PinInputInput, PinInputRoot } from 'radix-vue'
</script>

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

API 参考

根

包含复选框的所有部分。当在form中使用时，input也会渲染，以确保事件正确传播。

道具	默认值	类型
as	'div'	AsTag | 组件 此组件应渲染成的元素或组件。可以被asChild覆盖
asChild		布尔值 更改传递为子元素的默认渲染元素，合并其属性和行为。 阅读我们的 组合 指南以了解更多详细信息。
defaultValue		string[] Pin 输入在首次渲染时的默认值。在不需要控制其选中状态时使用。
dir		'ltr' | 'rtl' 组合框的阅读方向，在适用时。 如果省略，则从ConfigProvider全局继承或假设 LTR（从左到右）阅读模式。
disabled		布尔值 当为true时，阻止用户与 Pin 输入交互
id		字符串 元素的 ID
mask		布尔值 当为true时，Pin 输入将被视为密码。
modelValue		string[] Pin 输入的受控选中状态。可以绑定为v-model。
name		字符串 Pin 输入的名称。作为名称/值对的一部分，与其所属表单一起提交。
otp		布尔值 当为true时，移动设备会自动从消息或剪贴板检测 OTP，并启用自动填充字段。
placeholder	''	字符串 用于空 Pin 输入的占位符字符。
required		布尔值 当为true时，表示用户必须在提交所属表单之前检查 Pin 输入。
type	'text'	'number' | 'text' 输入的输入类型。

发出	有效载荷
complete	[value: string[]]
update:modelValue	[value: string[]] 当值更改时调用的事件处理程序。

插槽（默认）	有效载荷
modelValue	string[] 当前输入值

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

输入

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

道具	默认值	类型
as	'input'	AsTag | 组件 此组件应渲染成的元素或组件。可以被asChild覆盖
asChild		布尔值 更改传递为子元素的默认渲染元素，合并其属性和行为。 阅读我们的 组合 指南以了解更多详细信息。
disabled		布尔值 当为true时，阻止用户与 Pin 输入交互
index*		数字 此输入绑定到的值的 position。

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

示例

OTP 模式

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

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

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

数字模式

您可以通过将 type 设置为number来将 Pin 输入设置为仅接受number类型。

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

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

无障碍性

键盘交互

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