使用一组独立的输入框来采集一次性密码。
<flux:otp wire:model="code" length="6" />显示一个用于验证一次性密码的表单。
<flux:card> <form wire:submit="verify" class="space-y-8"> <div class="max-w-64 mx-auto space-y-2"> <flux:heading size="lg" class="text-center">Verify your account</flux:heading> <flux:text class="text-center">Please enter a one-time password from the authenticator app.</flux:text> </div> <flux:otp wire:model="code" length="6" label="OTP Code" label:sr-only :error:icon="false" error:class="text-center" class="mx-auto" /> <div class="space-y-4"> <flux:button variant="primary" type="submit" class="w-full">Verify</flux:button> <flux:button wire:click="resend" class="w-full">Resend code</flux:button> </div> </form></flux:card>使用 submit="auto" 属性，在所有输入框填满后自动提交表单。
<form wire:submit="verify" class="space-y-8"> <div class="max-w-64 mx-auto space-y-2"> <flux:heading size="lg" class="text-center">Verify your account</flux:heading> <flux:text class="text-center">Please enter a one-time password from the authenticator app.</flux:text> </div> <div class="space-y-6"> <flux:otp wire:model="code" length="6" submit="auto" class="mx-auto" /> </div></form>通过将 mode 设置为 alphanumeric 或 alpha，允许输入非数字字符。
<flux:otp wire:model="licenseKey" length="10" mode="alphanumeric" label="License key" description:trailing="Enter the license key printed on the installation disc" />若要遮蔽敏感输入值，请使用 private 属性。
<flux:otp wire:model="pin" length="4" private label="PIN Code" />使用默认插槽渲染输入框，并在它们之间插入分隔符。
—
<flux:otp wire:model="code"> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> <flux:otp.separator /> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /></flux:otp>使用 flux:otp.group 组件将所有输入框分组在一起。
<flux:otp wire:model="code"> <flux:otp.group> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> </flux:otp.group></flux:otp>使用 flux:otp.separator 组件在输入框分组之间添加分隔符。
—
<flux:otp wire:model="code"> <flux:otp.group> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> </flux:otp.group> <flux:otp.separator /> <flux:otp.group> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> </flux:otp.group></flux:otp>|
属性
|
描述
|
|---|---|
| wire:model |
将值绑定到 Livewire 属性。更多信息请参阅
wire:model 文档
。
|
| value |
当前值，字符串类型。
|
| length |
要显示的输入框数量。
|
| mode |
输入模式。可选值为
numeric
（默认）、
alphanumeric
，或
alpha
。
|
| private |
将输入框设置为
private
类型，以遮蔽输入值。
|
| submit |
控制通过键盘提交表单的行为。
可选值：默认，
auto
表示在所有输入框填满时提交。
|
| autocomplete |
为第一个输入框设置 autocomplete 属性。
使用
off
可以关闭浏览器自动填充。默认值为
one-time-code
.
|
|
插槽
|
描述
|
|---|---|
| default |
自定义输入框和分隔符。使用该插槽时，
length
属性将被忽略。
|