Tui

VerificationCodeInput 验证码输入

用于验证码输入场景，支持自定义位数、尺寸、样式和错误状态，输入后自动跳转到下一格，支持 Backspace 回退。

基础用法

默认 5 位验证码输入，输入完成即可获取完整验证码。

示例代码

vue

自定义位数

通过 number 属性设置验证码位数，例如 6 位。

示例代码

vue

不同尺寸

通过 size 属性设置输入框尺寸，支持 small、medium（默认）、large 三种。

Small

Medium（默认）

Large

示例代码

vue

自定义样式

通过 borderColor、cursorColor、borderRadius、gap 属性自定义样式，也可直接覆盖 CSS 变量。

自定义边框与光标颜色

自定义间距与圆角

示例代码

vue

错误状态

通过 error 设置错误状态。showError 控制是否显示红色边框（默认 true），errorShake 开启后错误时整体上下抖动。

输入完成后触发错误提示

输入满 5 位后自动模拟验证失败

仅红色错误提示（无抖动）

隐藏错误提示

示例代码

vue

属性 Props

number

验证码位数

number

size

输入框尺寸

string

small / medium / large

medium

borderColor

边框颜色，对应 CSS 变量 `--ts-verification-code-input-border-color`

string

#ccc

cursorColor

光标及激活态边框颜色，对应 CSS 变量 `--ts-verification-code-input-cursor-color`

string

#007bff

borderRadius

输入框圆角，对应 CSS 变量 `--ts-verification-code-input-border-radius`

string | number

var(--ts-radius)

gap

输入框间距，对应 CSS 变量 `--ts-verification-code-input-gap`

string | number

8px

error

是否处于错误状态

boolean

false

showError

是否显示错误状态的红色提示

boolean

true

errorShake

错误时是否触发抖动动画

boolean

false

事件 Events

input

输入变化时触发，返回当前拼接的验证码字符串

(e: "input", value: string) => void

基础用法

自定义位数

不同尺寸

自定义样式

错误状态

属性 Props

事件 Events