marcorombach/livewire-confirm-modal

像 wire:confirm 指令,但以模态框的形式显示在您的页面上。

0.2.4 2024-10-01 07:19 UTC

This package is auto-updated.

Last update: 2024-10-01 07:21:57 UTC


README

Latest Version on Packagist Total Downloads

这是一个简单的包,旨在提供类似于 wire:confirm 的 Livewire 指令,但不使用默认的 JavaScript confirm() 函数。如果您需要在不同浏览器中具有相同样式的确认框,这将非常有用。您也可以通过更改视图来应用自己的样式。

默认情况下,此包使用 TailwindCSS 来样式化模态框。模态框的外观灵感来自 Pines UI 组件。

alt text

安装

您可以通过 composer 安装此包

composer require marcorombach/livewire-confirm-modal

您需要在您的 tailwind.config.js 中添加以下内容

"./vendor/marcorombach/livewire-confirm-modal/resources/views/components/*.php"

它应该看起来像这样

content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    ...
    "./vendor/marcorombach/livewire-confirm-modal/resources/views/components/*.php",
] 

为了包含必要的脚本和模态框本身,请确保在所有应使用 wire:confirm-modal 的视图中包含此内容

<x-livewire-confirm-modal/>

可选地,您可以使用以下命令发布视图

php artisan vendor:publish --tag="livewire-confirm-modal-views"

在更改视图时,请特别小心,尤其是当触及 Alpine 指令时。

使用方法

<button wire:confirm-modal="title|description" wire:click="doSomething(1,2)">
    Test
</button>

titledescription 替换为您希望确认模态框显示的内容。现在每次点击按钮时都会显示一个模态框。它将防止 wire:click 在模态框中的继续按钮被点击之前执行。

鸣谢

许可证

MIT 许可证 (MIT)。有关更多信息,请参阅 许可证文件