OtpInput 一次性密码
一次性密码输入格子 —— 自动跳转下一格、Backspace 回退、整段粘贴自动分配。
基础用法
length 设定格子数；输入后自动聚焦下一格，整段数字粘贴时按位分配到剩余格子。
当前值：(空)
<CfOtpInput v-model="code" :length="6" /><CfOtpInput value={code} onChange={setCode} length={6} />长度变化
length 任意整数 — 4 位 PIN、6 位 OTP（默认）、8 位长验证码。
length = 4 (PIN)
length = 6（默认 OTP）
length = 8（更长验证码）
<CfOtpInput v-model="a" :length="4" />
<CfOtpInput v-model="b" :length="6" />
<CfOtpInput v-model="c" :length="8" /><CfOtpInput value={a} onChange={setA} length={4} />
<CfOtpInput value={b} onChange={setB} length={6} />
<CfOtpInput value={c} onChange={setC} length={8} />字符集
type —— numeric（默认，仅 0–9）/ alphanumeric（字母 + 数字）。粘贴时不在字符集里的字符会被剔除。
type = numeric（默认）— 仅 0–9
type = alphanumeric — 字母 + 数字
<CfOtpInput v-model="a" :length="6" type="numeric" />
<CfOtpInput v-model="b" :length="6" type="alphanumeric" /><CfOtpInput value={a} onChange={setA} length={6} type="numeric" />
<CfOtpInput value={b} onChange={setB} length={6} type="alphanumeric" />分隔符 + 自动聚焦 + complete
separatorAt 在第 N 格后插入分隔符（视觉分组，常用 3 / 4）。autoFocus 让组件挂载即聚焦第一格。所有格子填满时触发 complete / onComplete —— 立即提交验证码很方便。
当前值：(空)
<CfOtpInput
v-model="code"
:length="6"
:separator-at="3"
auto-focus
@complete="(v) => completed = v"
/><CfOtpInput
value={code}
onChange={setCode}
length={6}
separatorAt={3}
autoFocus
onComplete={setCompleted}
/>三档尺寸
size —— sm 紧凑型 / md 默认 / lg 移动端友好。
<CfOtpInput v-model="a" :length="6" size="sm" />
<CfOtpInput v-model="b" :length="6" size="md" />
<CfOtpInput v-model="c" :length="6" size="lg" /><CfOtpInput value={a} onChange={setA} length={6} size="sm" />
<CfOtpInput value={b} onChange={setB} length={6} size="md" />
<CfOtpInput value={c} onChange={setC} length={6} size="lg" />键盘交互
| 按键 | 行为 |
|---|---|
| 字符键 | 当前格写入字符，自动跳到下一格 |
Backspace | 当前格非空时清空；空格时回退到上一格 |
← / → | 在格子之间移动焦点 |
| 粘贴 | 整段按位填入剩余格子，超出忽略 |
API · Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue (Vue) / value (React) | string | '' | 当前值 |
length | number | 6 | 格子数 |
type | 'numeric' | 'alphanumeric' | 'numeric' | 允许字符集 |
size | 'sm' | 'md' | 'lg' | 'md' | 格子尺寸 |
disabled | boolean | false | 禁用 |
autoFocus | boolean | false | 自动聚焦第一格 |
separatorAt | number | — | 在第 N 个格子后插入分隔符（如 3 在 3 后） |
API · Events
| 事件 | 参数 | 说明 |
|---|---|---|
update:modelValue (Vue) / onChange (React) | (value: string) | 任意一格变化时触发 |
complete (Vue) / onComplete (React) | (value: string) | 全部格子填满时触发 |
反馈与讨论
OtpInput 一次性密码 的讨论