---
url: /components/otp-input.md
---
# OtpInput 验证码输入框

方框式验证码输入（OTP）：逐位输入自动前进、退格自动回退、粘贴整段验证码自动分配到各位；`type="number"` 时移动端唤起数字键盘且首框启用 `one-time-code` 自动填充，明暗一体。

## 基础用法

```vue
<EvOtpInput @complete="(v) => (otpResult = v)" />
```

## 粘贴与键盘

```vue
<EvOtpInput :length="4" @complete="(v) => (otpPaste = v)" />
```

## 掩码与字母数字

```vue
<EvOtpInput masked model-value="836274" />
<EvOtpInput type="text" :length="4" error />
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前值，各框字符按序拼接 | string | `''` |
| length | 方框数量（1~10） | number | `6` |
| type | number 只收数字并启用 one-time-code；text 收字母数字 | `'number'` | `'text'` | `'number'` |
| masked | 掩码显示（已填位显示为圆点） | boolean | `false` |
| size | 尺寸 | `'small'` | `'default'` | `'large'` | `'default'` |
| disabled | 禁用 | boolean | `false` |
| error | 错误态（红色边框） | boolean | `false` |
| autofocus | 挂载后自动聚焦首个方框 | boolean | `false` |

### 事件

| 事件 | 说明 | 参数 |
| --- | --- | --- |
| update:modelValue | 值变化 | `(value: string)` |
| change | 值变化 | `(value: string)` |
| complete | 全部方框填满 | `(value: string)` |

### 方法

| 方法 | 说明 | 参数 |
| --- | --- | --- |
| focus | 聚焦指定方框（缺省首个） | `(index?: number)` |
| blur | 失焦 | — |
| clear | 清空全部方框 | — |