README

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

警告：此包与 Livewire 2 不兼容。

文档

需求
安装
使用
发布资产
- 自定义视图
备注

需求

Bootstrap 5 和 PopperJS 必须先通过 npm 安装

npm install bootstrap
npm install @popperjs/core

安装

需要此包

composer require aliqasemzadeh/livewire-bootstrap-modal

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

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

在你的应用 JavaScript 文件中引入 ../../vendor/aliqasemzadeh/livewire-bootstrap-modal/resources/js/modals

import('@popperjs/core');
import '../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
import '../../vendor/aliqasemzadeh/livewire-bootstrap-modal/resources/js/modals.js';

使用

弹窗视图

创建一个你想要显示为弹窗的 Livewire 组件。该组件的视图必须使用 Bootstrap modal-dialog 容器

<div>
        <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" wire:click="$dispatch('hideModal')" 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"  wire:click="$dispatch('hideModal')">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
</div>

显示弹窗

通过发出带有组件别名的 showModal 事件来显示弹窗

<button type="button" wire:click="$dispatch('showModal', {data: {'alias' : 'livewire.modal.user','params' :{'user':'Ali Qasemzadeh'}}})">
    {{ __('Update Profile') }}
</button>

挂载参数

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

<button type="button"wire:click="$dispatch('showModal', {data: {'alias' : 'livewire.modal.user','params' :{'user':'Ali Qasemzadeh'}}})">
    {{ __('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="$dispatch('hideModal')">
    {{ __('Close') }}
</button>

取消弹窗

你可以在视图中发出事件

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

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

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

    // save the record

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

自定义弹窗大小

现在你可以使用自定义弹窗大小，默认我们使用 modal-lg

<button type="button"wire:click="$dispatch('showModal', {data: {'alias' : 'livewire.modal.user','size' :'modal-xl')">
  {{ __('Show XL Modal') }}
</button>

发布资产

自定义视图

通过发布包视图来使用你自己的弹窗视图

php artisan vendor:publish --tag=livewire-bootstrap-modal:views

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

备注

1-你应该在主槽中使用按钮或 @click。

2-我们正在努力解决一些问题，我们希望很快修复它们。

3-我们将很快添加一些选项。

4- wire:navigate 不工作（仅第一个弹窗打开）。

rawitjan / livewire-bootstrap-modal

维护者

详细信息