如何在 Livewire 中添加确认对话框

Livewire 发布了一个 wire:confirm HTML 指令，使在执行重要或危险操作之前添加确认对话框比以往更容易。确认指令将触发本机浏览器 Window confirm 模态，一旦用户确认，Livewire 将触发预期的事件。

这是粗略的 JS 等效代码

if (window.confirm("Are you sure you want to delete this user?")) {
  // Proceed only after the user has confirmed
}

如何在 Livewire 中做到这一点？非常容易！

对于带有“取消”和“确定”按钮的简单确认，您可以像这样使用 wire:confirm，并将其与 wire:click 等事件结合使用

<div>
    <h2>Danger zone</h2>
    <button
        type="button"
        wire:click="delete"
        wire:confirm="Are you sure you want to delete this project?"
    >
        Delete this project
    </button>
</div>

当您点击按钮时，Livewire 将触发本机浏览器确认模态

如果您希望用户输入一些内容来确认他们有意执行某项破坏性操作，例如删除 GitHub 上的存储库，情况会变得更有趣

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"
    >
        Delete this project
    </button>
</div>

请注意 |DELETE，它让 Livewire 知道预期的提示以进行匹配。

点击按钮将提示用户使用 prompt() 模态，要求他们输入“DELETE”。如果用户的输入匹配，它将触发 Livewire 组件上的 delete() 方法。

进一步考虑，您可以使确认词或短语与组件上的动态值相匹配。例如，也许您想让用户输入项目名称以确认

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType &quot;{{ str($project_name)->upper() }}&quot; to confirm|{{ str($project_name)->upper() }}"
    >
        Delete this project
    </button>
</div>