wire:confirm

在 Livewire 中执行危险操作前，你可能希望给用户某种视觉确认。

在任意动作（wire:click、wire:submit 等）之外再加上 wire:confirm 即可轻松实现。

下面示例给「Delete post」按钮加上确认对话框：

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

用户点击「Delete post」时，Livewire 会弹出确认对话框（浏览器默认的确认提示）。若用户按 Esc 或点取消，动作不会执行；若按「OK」，动作才会完成。

提示用户输入

对于更危险的操作（例如彻底删除用户账户），你可能希望弹出需要输入特定字符串才能确认的提示。

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 <!-- [tl! highlight:-2,1] -->
</button>

用户点击「Delete account」时，只有在提示框中输入「DELETE」才会执行动作，否则会取消。

参考

wire:confirm="message"

修饰符

修饰符	说明
.prompt	提示用户输入；格式："message|expected-input"