Skip to content

wire:confirm

在 Livewire 中执行危险操作之前,你可能希望为用户提供某种视觉确认。

Livewire 通过在任何操作(wire:clickwire:submit 等)之外添加 wire:confirm 使这变得容易。

以下是向"删除文章"按钮添加确认对话框的示例:

blade
<button
    type="button"
    wire:click="delete"
    wire:confirm="Are you sure you want to delete this post?"
>
    Delete post <!-- [tl! highlight:-2,1] -->
</button>

当用户单击"删除文章"时,Livewire 将触发确认对话框(默认浏览器确认警报)。如果用户按下 Escape 或按下取消,则不会执行该操作。如果他们按下"确定",该操作将完成。

提示用户输入

对于更危险的操作,例如完全删除用户的帐户,你可能希望向他们显示一个确认提示,他们需要输入特定的字符串来确认操作。

Livewire 提供了一个有用的 .prompt 修饰符,当应用于 wire:confirm 时,它将提示用户输入,并且仅当输入匹配(区分大小写)提供的字符串(由 wire:confirm 值末尾的"|"(管道)字符指定)时才确认操作:

blade
<button
    type="button"
    wire:click="delete"
    wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"
>
    Delete account <!-- [tl! highlight:-2,1] -->
</button>

当用户按下"删除帐户"时,只有在提示中输入"DELETE"时才会执行该操作,否则将取消该操作。