OTP 输入

OTP 输入用于输入一次性密码。

导入 #


import InputOtp from 'primevue/inputotp';

基本 #

InputOtp 与 v-model 属性一起使用进行双向值绑定。字符数由 length 选项定义，默认为 4。


<InputOtp v-model="value" />

表单 #

InputOtp 与 PrimeVue 表单库无缝集成。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
    <div class="flex flex-col gap-1">
        <InputOtp name="passcode" />
        <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

掩码 #

启用 mask 选项以隐藏输入字段中的值。


<InputOtp v-model="value" mask />

仅限整数 #

当存在 integerOnly 时，只能接受整数作为输入。


<InputOtp v-model="value" integerOnly />

填充 #

将 variant 属性指定为 filled 以使用比默认的 outlined 样式更高的视觉强调来显示组件。


<InputOtp v-model="value" variant="filled" />

尺寸 #

InputOtp 提供 small 和 large 尺寸作为基础尺寸的替代方案。


<InputOtp v-model="value1" size="small" />
<InputOtp v-model="value2" />
<InputOtp v-model="value3" size="large" />

模板 #

使用绑定到提供的事件和属性的自定义 UI 元素定义模板，以替换默认设计。


<InputOtp v-model="value">
    <template #default="{ attrs, events }">
        <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
    </template>
</InputOtp>

示例 #

带有模板和附加元素的示例 UI 实现。

验证您的账户

请输入发送到您手机的代码。


<div class="flex flex-col items-center">
    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
    <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
    <InputOtp v-model="value" :length="6" style="gap: 0">
        <template #default="{ attrs, events, index }">
            <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
            <div v-if="index === 3" class="px-4">
                <i class="pi pi-minus" />
            </div>
        </template>
    </InputOtp>
    <div class="flex justify-between mt-8 self-stretch">
        <Button label="Resend Code" link class="p-0"></Button>
        <Button label="Submit Code"></Button>
    </div>
</div>

可访问性 #

屏幕阅读器

输入 OTP 使用一组 InputText 组件，有关屏幕阅读器支持的更多信息，请参阅 InputText 组件。

键盘支持

按键	功能
tab	将焦点移动到输入 otp。
右箭头	将焦点移动到下一个输入元素。
左箭头	将焦点移动到上一个输入元素。
退格键	删除输入并将焦点移动到上一个输入元素。