验证码输入 Pin Input

#基础用法

Verification code

pin-input/basic.vue

<script setup lang="ts">
import { PinInput } from "@bysages/vue";
</script>

<template>
  <PinInput.Root>
    <PinInput.Label>Verification code</PinInput.Label>
    <PinInput.Control>
      <PinInput.Input v-for="(v, i) in [0, 1, 2, 3]" :key="i" :index="i" />
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
</template>

#属性

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#HiddenInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Input

属性	类型	默认值	描述
`index`	`number`		—

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	每个输入格使用的控件高度档位
`autoFocus`	`boolean`		是否自动聚焦第一个输入框
`autoSubmit`	`boolean`		全部输入格填满后是否自动提交所属表单
`blurOnComplete`	`boolean`		值输入完成后是否让输入框失焦
`count`	`number`		渲染的输入格数量，用于生成 SSR ARIA 属性；下一个大版本中将必填
`defaultValue`	`string[]`		PIN 输入框的初始值；适合不需要受控值的场景
`disabled`	`boolean`		是否禁用各个输入框
`form`	`string`		底层 input 元素关联的表单
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; hiddenInput: string; label: string; control: string; input(id: string): string; }>`		PIN 输入框各元素的 id，便于组合使用
`invalid`	`boolean`		PIN 输入框是否无效
`mask`	`boolean`		为 `true` 时，按 `type=password` 的方式隐藏输入值
`modelValue`	`string[]`		验证码输入框的 `v-model` 值
`name`	`string`		输入元素的 `name` 属性，用于表单提交
`otp`	`boolean`		为 `true` 时，PIN 输入组件让各字段使用 `autocomplete="one-time-code"`
`pattern`	`string`		校验用户输入值的正则表达式
`placeholder`	`string`	`"○"`	输入框的占位文本
`readOnly`	`boolean`		PIN 输入框是否处于有效状态
`required`	`boolean`		PIN 输入框是否必填
`sanitizeValue`	`(value: string) => string`		校验前清理粘贴值的函数，可去除连字符、空格或其他格式字符
`selectOnFocus`	`boolean`		输入框聚焦时是否选中输入值
`translations`	`pinInput.IntlTranslations`		无障碍元素及其状态的本地化文案
`type`	`'alphanumeric' \| 'numeric' \| 'alphabetic'`	`"numeric"`	验证码输入框允许的值类型