marcorombach / livewire-confirm-modal
像 wire:confirm 指令,但以模态框的形式显示在您的页面上。
0.2.4
2024-10-01 07:19 UTC
Requires
- php: ^8.2
- illuminate/contracts: ^10.0||^11.0
- livewire/livewire: ^3.5
- spatie/laravel-package-tools: ^1.16
Requires (Dev)
- larastan/larastan: ^2.9
- laravel/pint: ^1.14
- nunomaduro/collision: ^8.1.1||^7.10.0
- orchestra/testbench: ^9.0.0||^8.22.0
- pestphp/pest: ^2.34
- pestphp/pest-plugin-arch: ^2.7
- pestphp/pest-plugin-laravel: ^2.3
- phpstan/extension-installer: ^1.3
- phpstan/phpstan-deprecation-rules: ^1.1
- phpstan/phpstan-phpunit: ^1.3
README
这是一个简单的包,旨在提供类似于 wire:confirm
的 Livewire 指令,但不使用默认的 JavaScript confirm()
函数。如果您需要在不同浏览器中具有相同样式的确认框,这将非常有用。您也可以通过更改视图来应用自己的样式。
默认情况下,此包使用 TailwindCSS 来样式化模态框。模态框的外观灵感来自 Pines UI 组件。
安装
您可以通过 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>
将 title
和 description
替换为您希望确认模态框显示的内容。现在每次点击按钮时都会显示一个模态框。它将防止 wire:click
在模态框中的继续按钮被点击之前执行。
鸣谢
许可证
MIT 许可证 (MIT)。有关更多信息,请参阅 许可证文件。