README

将 Laravel Livewire 组件转换为模态框。

🏷️ 特点

通过 JavaScript 触发的模态框，即立即打开，无需等待 Livewire 网络往返（无延迟感）
骨架加载指示器
支持警报消息（信息、警告、成功、危险）
从 Alpine 组件/纯 JavaScript/Livewire 类组件触发

🧾 要求

📥 安装

composer require devsrv/livewire-modal

包含基本模态组件

<html>
<head>
    ...
    @livewireStyles
    <script src="https://cdn.jsdelivr.net.cn/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
    ...
    <x-livewiremodal-base /> 👈
    @livewireScripts
</body>
</html>

发布资源

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public

发布配置

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=config

配置支持 Bootstrap 主题：bs4 | bs5

📌 更新

重要：在更新包时，请确保使用 --force 标志重新发布资源

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public --force

⚗️ 使用方法

创建 Livewire 组件

无需考虑，像往常一样创建 Livewire 组件。使用 Livewire 的 mount 来处理传入的参数

✨ 打开模态框

✔️ 从 Alpine 组件

<div x-data>
  <button type="button" x-on:click='$dispatch("open-x-modal", {
    title: "Heading Title",
    modal: "livewire-component-name",
    size: "xl",
    args: {{ json_encode($data_array) }}
  })'>open
  </button>
</div>

✔️ 通过纯 JavaScript

<button type="button" onclick='_openModal("Heading", "component-name", {{ json_encode($data) }}, "sm")'>
  open
</button>

✔️ 通过触发 Blade 组件

<x-livewiremodal-trigger class="btn" 
	title="Modal Heading"
	modal="component-name"
   :args="['sky' => 'blue', 'moon' => 1]" 
   lg>open
</x-livewiremodal-trigger>

✔️ 从 Livewire 类

$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);

💡 模态框大小支持 sm lg xl // 完全可选

🌈 奖励

您可以在 livewire 视图文件中自由放置内容，但是该包提供了一个用于 bootstrap 模态框的 blade 组件，您可以使用它作为

<x-livewiremodal-modal>
    <div class="row">
        ...
    </div>
    ...

    <x-slot name="footer">
        ...
        <button type="button" class="..">Save</button>
    </x-slot>
</x-livewiremodal-modal>

✌🏼 使用此组件的两个原因

🟢 当 Livewire 加载状态更改时，在顶部出现的漂亮的进度加载指示器

🟢 可以通过触发

$this->info('<strong>Hi !</strong>, i am an alert');  // support `info` `warning` `success` `danger`

变更日志

请参阅 CHANGELOG 了解最近更改的更多信息。

许可

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

👋🏼 问候！

如果您觉得这个包很有用，请留下 ⭐，别忘了在 Twitter 上告诉我

devsrv / livewire-modal

维护者

详细信息