wire:confirm
您是视觉学习者吗?
使用我们深入的屏幕录制掌握 Livewire
立即观看
在 Livewire 中执行危险操作之前,您可能希望为用户提供某种视觉确认。
Livewire 通过在任何操作(wire:click
、wire:submit
等)中添加 wire:confirm
来轻松实现此目的。
以下是向“删除帖子”按钮添加确认对话框的示例
<button type="button" wire:click="delete" wire:confirm="Are you sure you want to delete this post?"> Delete post </button>
当用户单击“删除帖子”时,Livewire 将触发一个确认对话框(默认浏览器确认警报)。如果用户按 ESC 或点击取消,则不会执行该操作。如果他们按“确定”,则该操作将完成。
提示用户输入
对于更危险的操作,例如完全删除用户的帐户,您可能希望向他们显示一个确认提示,他们需要在其中输入特定字符串来确认操作。
Livewire 提供了一个有用的 .prompt
修饰符,当应用于 wire:confirm
时,它会提示用户输入,并且仅在输入与提供的字符串(在 wire:confirm
值的末尾用“|”(管道)字符指定)匹配(区分大小写)时才确认操作
<button type="button" wire:click="delete" wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"> Delete account </button>
当用户按“删除帐户”时,仅当在提示中输入“DELETE”时才会执行该操作,否则该操作将被取消。