VerificationCode 验证码输入框
用于输入验证码，逐字符输入，支持粘贴、密码模式、多种变体和状态。
基础用法
通过 v-model 双向绑定验证码值，length 设置位数：
验证码：（空）
不同位数
通过 length 属性设置验证码位数：
4 位验证码
6 位验证码
8 位验证码
输入框变体
提供 box、underline、circle 三种样式变体：
Box（默认）
Underline
Circle
不同尺寸
设置 size 属性使用三种预设尺寸：
密码模式
设置 type 为 password 以圆点替代字符显示：
验证码：（空）
数字模式
设置 type 为 number 限制只能输入数字，移动端弹出数字键盘：
验证码：（空）
分隔符
设置 divider 属性在指定位置添加额外间距，如每 3 位分隔：
每 3 位分隔
指定位置分隔
自定义间距
通过 gap 属性设置输入框之间的间距：
状态
通过 status 设置成功、错误、警告状态：
成功
1
2
3
4
错误
5
6
7
8
警告
9
0
1
2
禁用与只读
disabled 禁用输入，readonly 只读展示：
1
2
3
4
5
6
6
5
4
3
2
1
组合使用
在卡片中结合其他组件构建验证场景：
短信验证
验证码已发送至 138****8888，请输入 6 位数字验证码
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | string | '' | 验证码值（v-model） |
length | number | 6 | 验证码位数 |
size | 'sm' | 'md' | 'lg' | 'md' | 输入框尺寸 |
variant | 'box' | 'underline' | 'circle' | 'box' | 输入框变体样式 |
type | 'text' | 'number' | 'password' | 'text' | 输入类型：number 限制数字且弹出数字键盘，password 以圆点显示 |
gap | number | string | 8 | 输入框之间的间距（px 或 string） |
divider | number | number[] | — | 分隔符位置，number 表示每隔 N 位分隔，number[] 指定在第几位后分隔 |
disabled | boolean | false | 是否禁用 |
readonly | boolean | false | 是否只读 |
error | boolean | false | 是否显示错误样式 |
status | 'default' | 'error' | 'success' | 'warning' | 'default' | 状态类型，会影响边框颜色 |
plain | boolean | false | 是否使用透明背景 |
mask | boolean | string | false | 是否遮罩显示，可自定义遮罩字符 |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:modelValue | (value: string) => void | 验证码值变化时触发 |
change | (value: string) => void | 验证码值变化时触发 |
finish | (value: string) => void | 验证码输入完成时触发 |
focus | () => void | 获得焦点时触发 |
blur | () => void | 失去焦点时触发 |
Methods
| 方法名 | 类型 | 说明 |
|---|---|---|
focus | () => void | 使输入框获得焦点 |
blur | () => void | 使输入框失去焦点 |
clear | () => void | 清空验证码 |