PinCode
分格验证码 / OTP 输入组件:N 个受控单字符输入格,逐格填入、自动跳格、整串粘贴自动分发,支持数字/混合/RegExp/函数四种字符校验。
如何引入
import { PinCode } from '@chenzy-design/svelte';基础用法
6 位数字验证码,受控值绑定,逐格自动跳格。
位数与格式
count 设定位数,format 设定单字符可输入范围。
尺寸
size 控制每格大小(small / default / large)。
校验态与禁用
status 透传各格边框语义,disabled 置灰不可输入。
完成回调
填满末格自动 blur 并触发 onComplete。
字符格式
format 四种:number / mixed / RegExp(只大写)/ 函数(只小写)逐字符校验。
命令式聚焦
bind:this 拿组件实例,focus(index) / blur(index) 聚焦/失焦指定格。
受控
value 由外部持有,配合 onChange,可编程式随机填入。
API 参考
PinCode
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 受控值;整串验证码,配合 onChange | string | undefined |
defaultValue | 非受控初始值,仅初始化拆分 | string | '' |
count | 验证码位数(格数) | number | 6 |
format | 单字符可输入范围;number→inputMode=numeric | 'number' | 'mixed' | RegExp | ((char: string) => boolean) | 'number' |
size | 每格尺寸 | 'small' | 'default' | 'large' | default |
disabled | 禁用全部格 | boolean | false |
autoFocus | 挂载聚焦第一格(对齐 Semi);验证码场景通常立即输入,如需关闭传 autoFocus={false} | boolean | true |
name | 表单字段名,透传隐藏聚合 input | string | undefined |
id | 根容器 id | string | 自动生成 |
ariaLabel | 无可视标签时分组辅助名 | string | i18n 默认 |
ariaLabelledby | 外部 label id,优先于 ariaLabel | string | undefined |
status | 校验态 | 'default' | 'warning' | 'error' | default |
className | 根容器类名 | string | undefined |
style | 根容器内联样式 | string | undefined |
onChange | 任一格变化触发,回传整串 | (value: string) => void | undefined |
onComplete | 填满末格触发一次,同时 blur 末格 | (value: string) => void | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onChange | (value: string) | 任一格值变化即触发(含清空) |
onComplete | (value: string) | 最后一格填入完成时触发一次 |
Methods
| 属性 | 类型 | 说明 |
|---|---|---|
focus | — | 聚焦第 index 格(默认 0) |
blur | — | 移出第 index 格焦点 |
Accessibility
| ARIA role | group |
| APG | group-of-inputs |
| 键盘交互 | ArrowLeft/ArrowRightBackspaceDeleteHomeEnd自动跳格 |
- root role=group + aria-label(i18n)或 aria-labelledby
- 每格 aria-label 位次「第 N 位,共 M 位」
- 每格 autoComplete=one-time-code(OTP 系统级填充,超越 Semi)
- inputMode 随 format(number→numeric);maxlength=1
- status=error → 各格 aria-invalid;disabled → aria-disabled + 原生 disabled
- RTL:←→ 语义镜像;组合态(isComposing)不写入
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-pincode-cell-font-size | var(--cd-font-size-header-6) | 单格字符字号(略大于正文,居中显示单字符) |