组件
<script setup lang="ts">
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from '@/components/ui/input-otp'
</script>
<template>
<InputOTP :maxlength="6">
<InputOTPGroup>
<InputOTPSlot :index="0" />
<InputOTPSlot :index="1" />
<InputOTPSlot :index="2" />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot :index="3" />
<InputOTPSlot :index="4" />
<InputOTPSlot :index="5" />
</InputOTPGroup>
</InputOTP>
</template>安装
🌐 Installation
pnpm dlx shadcn-vue@latest add input-otp
用法
🌐 Usage
<script setup lang="ts">
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from '@/components/ui/input-otp'
</script>
<template>
<InputOTP v-model="value" :maxlength="6">
<InputOTPGroup>
<InputOTPSlot :index="0" />
<InputOTPSlot :index="1" />
<InputOTPSlot :index="2" />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot :index="3" />
<InputOTPSlot :index="4" />
<InputOTPSlot :index="5" />
</InputOTPGroup>
</InputOTP>
</template>示例
🌐 Examples
模式
🌐 Pattern
使用 pattern 属性为 OTP 输入定义自定义模式。
🌐 Use the pattern prop to define a custom pattern for the OTP input.
<script setup lang="ts">
import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'vue-input-otp'
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from '@/components/ui/input-otp'
</script>
<template>
<InputOTP :maxlength="6" :pattern="REGEXP_ONLY_DIGITS_AND_CHARS">
<InputOTPGroup>
<InputOTPSlot :index="0" />
<InputOTPSlot :index="1" />
<InputOTPSlot :index="2" />
<InputOTPSlot :index="3" />
<InputOTPSlot :index="4" />
<InputOTPSlot :index="5" />
</InputOTPGroup>
</InputOTP>
</template><script setup lang="ts">
import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'vue-input-otp'
// ...
</script>
<template>
<InputOTP
maxlength="6"
:pattern="REGEXP_ONLY_DIGITS_AND_CHARS"
>
<InputOTPGroup>
<InputOTPSlot :index="0" />
<!-- ... -->
</InputOTPGroup>
</InputOTP>
</template>分隔符
🌐 Separator
你可以使用 <InputOTPSeparator /> 组件在输入组之间添加分隔符。
🌐 You can use the <InputOTPSeparator /> component to add a separator between the input groups.
<script setup lang="ts">
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from '@/components/ui/input-otp'
</script>
<template>
<InputOTP :maxlength="6">
<InputOTPGroup>
<InputOTPSlot :index="0" />
<InputOTPSlot :index="1" />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot :index="2" />
<InputOTPSlot :index="3" />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot :index="4" />
<InputOTPSlot :index="5" />
</InputOTPGroup>
</InputOTP>
</template><script setup lang="ts">
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from '@/components/ui/input-otp'
// ...
</script>
<template>
<InputOTP maxlength="4">
<InputOTPGroup>
<InputOTPSlot :index="0" />
<InputOTPSlot :index="1" />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot :index="2" />
<InputOTPSlot :index="3" />
</InputOTPGroup>
</InputOTP>
</template>受控
🌐 Controlled
你可以使用 v-model 指令来控制输入值。
🌐 You can use the v-model directive to control the input value.
Enter your one-time password.
<script setup lang="ts">
import { ref } from 'vue'
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from '@/components/ui/input-otp'
const value = ref('')
</script>
<template>
<div class="space-y-2">
<InputOTP
v-model="value"
:maxlength="6"
>
<InputOTPGroup>
<InputOTPSlot :index="0" />
<InputOTPSlot :index="1" />
<InputOTPSlot :index="2" />
<InputOTPSlot :index="3" />
<InputOTPSlot :index="4" />
<InputOTPSlot :index="5" />
</InputOTPGroup>
</InputOTP>
<div class="text-center text-sm">
<template v-if="value === ''">
Enter your one-time password.
</template>
<template v-else>
You entered: {{ value }}
</template>
</div>
</div>
</template>表单
🌐 Form
你可以在表单中使用 InputOTP 组件，例如与 VeeValidate 一起使用。
🌐 You can use the InputOTP component within a form, for example with VeeValidate.
<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import { useForm, Field as VeeField } from 'vee-validate'
import { toast } from 'vue-sonner'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import {
Field,
FieldDescription,
FieldError,
FieldGroup,
FieldLabel,
} from '@/components/ui/field'
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from '@/components/ui/input-otp'
const formSchema = toTypedSchema(
z.object({
pin: z.string().min(6, {
message: 'Your one-time password must be 6 characters.',
}),
}),
)
const { handleSubmit, submitCount } = useForm({
validationSchema: formSchema,
initialValues: {
pin: '',
},
})
const onSubmit = handleSubmit((data) => {
toast('You submitted the following values:', {
description: h('pre', { class: 'mt-2 w-[320px] rounded-md bg-neutral-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(data, null, 2))),
})
})
</script>
<template>
<form id="form-otp-demo" class="space-y-6 w-sm" @submit="onSubmit">
<FieldGroup>
<VeeField v-slot="{ componentField, errors }" name="pin" :validate-on-blur="false" :validate-on-input="submitCount > 0" :validate-on-model-update="submitCount > 0">
<Field :data-invalid="!!errors.length">
<FieldLabel for="form-otp-demo-pin">
One-Time Password
</FieldLabel>
<InputOTP
id="form-otp-demo-pin"
v-bind="componentField"
:maxlength="6"
:aria-invalid="!!errors.length"
>
<InputOTPGroup>
<InputOTPSlot :index="0" />
<InputOTPSlot :index="1" />
<InputOTPSlot :index="2" />
<InputOTPSlot :index="3" />
<InputOTPSlot :index="4" />
<InputOTPSlot :index="5" />
</InputOTPGroup>
</InputOTP>
<FieldDescription>
Please enter the one-time password sent to your phone.
</FieldDescription>
<FieldError v-if="errors.length" :errors="errors" />
</Field>
</VeeField>
</FieldGroup>
<Button type="submit" form="form-otp-demo">
Submit
</Button>
</form>
</template>