InputOtp 一次性密码
分格的一次性密码 / 验证码输入框，作为独立顶层组件存在（不挂在 Input 命名空间下）。
何时使用
- 短信验证码 / 邮箱验证码输入。
- 一次性 PIN 码 / 安全码输入。
- 需要自动焦点流转 + 粘贴填充体验。
基本使用
默认 6 个 cell，每个 cell 输入一个字符后焦点自动跳到下一格。Backspace 退格、ArrowLeft / ArrowRight 跨格、粘贴会逐格填入。
自定义长度
字符遮罩
mask=true 用 • 显示，mask="#" 用自定义字符。emit 的 modelValue 始终是真实字符。
格式化输入
formatter 在每个字符写入前调用，常用于强制大写 / 限制只能数字。
校验状态
不同尺寸
InputOtp 参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| modelValue | string | '' | 完整字符串（长度 ≤ length），v-model |
| defaultValue | string | -- | 非受控初值 |
| length | number | 6 | 单元格数量 |
| mask | boolean | string | false |
| formatter | (v: string) => string | -- | 单字符变换器，写入 cell 前调用 |
| autoFocus | boolean | false | 挂载时聚焦首格 |
| disabled | boolean | false | 整体禁用 |
| size | 'large' | 'default' | 'small' |
| status | '' | 'error' | 'warning' |
InputOtp 事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| update:modelValue | value | v-model |
| change | (value, { index }) | 任意格内容变化时触发，index 是触发格序号 |
| focus | event | 任一 cell 获得焦点 |
| blur | event | 任一 cell 失去焦点 |
行为说明
- 自动焦点流转：在一格输入字符后焦点自动跳到下一格；一次输入多字符（IME / 安卓 / 粘贴）会逐格填入。
- Backspace：当前格有值 → 清掉；当前格为空且不在首格 → 回到上一格并清掉。
- ArrowLeft / ArrowRight：显式跨格焦点。
autocomplete="one-time-code"：首格设置该属性，配合 iOS / Android 系统自动填充短信验证码。inputmode="numeric"：移动端默认弹出数字键盘。