InputOtp 一次性密码输入框
一次性密码输入框组件，用于输入验证码、OTP 等场景。支持自动跳格、粘贴、退格回退、多种视觉风格。
基础用法
默认 6 位，自动跳转下一格。
vue
<TInputOtp v-model="value" />自定义位数
通过 :length 设置输入框位数。
vue
<TInputOtp v-model="value" :length="4" />视觉风格
三种样式：outlined（默认）、filled、underlined。
vue
<TInputOtp :length="4" type="filled" />
<TInputOtp :length="4" type="underlined" />尺寸
支持 sm、md、lg 三种尺寸。
vue
<TInputOtp :length="4" size="sm" />
<TInputOtp :length="4" size="lg" />禁用 & 只读
vue
<TInputOtp :length="4" disabled />
<TInputOtp :length="4" readonly model-value="1234" />密码模式
设置 mask 隐藏输入字符。
vue
<TInputOtp :length="4" mask />分隔符
设置 separator 在每 3 位后显示分隔线。
vue
<TInputOtp :length="6" separator />完成事件
所有位填满后触发 @finish 事件。
vue
<TInputOtp :length="4" @finish="handleFinish" />API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
v-model | string | '' | 输入的 OTP 值 |
length | number | 6 | 输入框位数 |
type | 'outlined' | 'filled' | 'underlined' | 'outlined' | 视觉风格 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
disabled | boolean | false | 禁用 |
readonly | boolean | false | 只读 |
mask | boolean | false | 密码模式 |
separator | boolean | false | 显示分隔符 |
validator | (char, index) => boolean | — | 字符校验函数 |
inputmode | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | 'numeric' | 键盘模式 |
Events
| 事件 | 参数 | 说明 |
|---|---|---|
update:model-value | value: string | 值变化 |
change | value: string | 失焦时触发 |
finish | value: string | 所有位填满 |
focus | event: FocusEvent | 聚焦 |
blur | event: FocusEvent | 失焦 |
Expose
| 方法 | 说明 |
|---|---|
focus(index?) | 聚焦指定位 |
blur() | 失焦 |
inputRefs | input 元素数组 |