验证码输入 (OTP Input)

OTP 输入用于通过一次性密码对用户进行身份验证的 MFA 过程。

TIP

此特性在 v3.4.0 (Blackguard) 版本引入。

使用

这里我们展示了在应用中可能用到的设置项。

API

组件	描述
v-otp-input	主要组件

组件结构

v-otp-input 组件是 v-field 组件的组合，后者是只能输入单字的输入框。

元素 / 区域	描述
1. 容器	验证码输入容器包含了数个 v-field 组件。
2. 输入区	v-field 组件用于创建单字输入区域。

指南

v-otp-input 组件是一组 v-field 组件的集合，它们组合在一起创建一个单一的输入。它用于验证通过电子邮件或短信发送给用户的一次性密码（OTP）。

以下代码片段是基本 v-otp-input 组件的示例。

<v-otp-input></v-otp-input>

属性

v-otp-input 组件支持大多数 v-field 的 属性，并且遵循与其他组件相同的设计模式

长度(length)

length 属性确定渲染的 v-field 组件数量。默认值为 6。

聚焦所有(Focus-all)

autofocus 属性会自动将焦点放在 v-otp-input 组件中的第一个元素上。

出错(Error)

error 属性将 v-otp-input 置于错误状态。这对于显示验证错误很有用。

变体(Variants)

v-otp-input 组件支持与 v-field、v-text-field 和其他输入相同的变体。

加载器(Loader)

当 v-otp-input 组件处于加载状态时， loader 属性会显示一个加载器。完成后，触发 finish 事件。

示例

以下是一些示例，演示了更高级和实际的 v-otp-input 组件的用法。

卡片变体

以下示例是卡片内使用的 v-otp-input 组件的详细示例。

手机验证码

The following example is a detailed example of a v-otp-input component used with mobile text. 以下示例是与手机验证码一起使用的 v-otp-input 组件的详细示例。

验证账户

以下示例是用于验证用户帐户的 v-otp-input 组件的详细示例。

分隔线(divider)

以下示例是与分隔线(divider)一起使用的 v-otp-input 组件的详细示例。