README

此包允许你在 Bootstrap 弹窗中动态展示你的 Laravel Livewire 组件。

文档

要求
安装
用法
发布资源
- 自定义视图

要求

Bootstrap 5 必须首先通过 webpack 安装

安装

需要此包

composer require bastinald/laravel-livewire-modals

将 livewire:modals 组件添加到你的应用布局视图

<livewire:modals/>
<livewire:scripts/>
<script src="{{ asset('js/app.js') }}"></script>

在你的应用 JavaScript 文件中需要 ../../vendor/bastinald/laravel-livewire-modals/resources/js/modals

require('@popperjs/core');
require('bootstrap');
require('../../vendor/bastinald/laravel-livewire-modals/resources/js/modals');

用法

模态视图

创建一个你想要作为模态显示的 Livewire 组件。此组件的视图必须使用 Bootstrap 的 modal-dialog 容器

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

显示模态

通过发射 showModal 事件并传递组件别名来显示模态

<button type="button" wire:click="$emit('showModal', 'auth.profile-update')">
    {{ __('Update Profile') }}
</button>

挂载参数

在别名之后传递参数到组件的 mount 方法

<button type="button" wire:click="$emit('showModal', 'users.update', '{{ $user->id }}')">
    {{ __('Update User #' . $user->id) }}
</button>

上面的示例中组件的 mount 方法可能看起来像这样

namespace App\Http\Livewire\Users;

use App\Models\User;
use Livewire\Component;

class Update extends Component
{
    public $user;
    
    public function mount(User $user)
    {
        $this->user = $user;
    }
    
    public function render()
    {
        return view('users.update');
    }
}

隐藏模态

通过发射 hideModal 事件来隐藏当前打开的模态

<button type="button" wire:click="$emit('hideModal')">
    {{ __('Close') }}
</button>

或使用 Bootstrap 的 data-bs-dismiss 属性

<button type="button" data-bs-dismiss="modal">
    {{ __('Close') }}
</button>

发射事件

你可以在视图中发射事件

<button type="button" wire:click="$emit('hideModal')">
    {{ __('Close') }}
</button>

或者在组件内部，就像任何正常的 Livewire 事件一样

public function save()
{
    $this->validate();

    // save the record

    $this->emit('hideModal');
}

发布资源

自定义视图

通过发布包视图使用你自己的模态视图

php artisan vendor:publish --tag=laravel-livewire-modals:views

现在编辑 resources/views/vendor/laravel-livewire-modals 内的视图文件。包将使用此视图来渲染组件。

mikield / laravel-livewire-modals

维护者

详细信息