README

此包允许您在 Tailwind 模态框内动态显示 Laravel Livewire 3 组件。

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

文档

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

安装

需要此包

composer require kezeneilhou/livewire-tailwind-modal

安装 Flowbit

npm install flowbite

在 tailwind.config.js 中添加视图路径并将 Flowbite 作为插件要求

module.exports = {
    content: [
      "./node_modules/flowbite/**/*.js"
    ],
    theme: {
      extend: {},
    },
    plugins: [
        require('flowbite/plugin')
    ],
}

在 ./resources/js/app.js 文件中导入 Flowbite JavaScript 包以启用交互式模态框。

import 'flowbite';

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

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

在您的应用 JavaScript 文件中要求 ../../vendor/kezeneilhou/livewire-tailwind-modal/resources/js/modals

import '../../vendor/kezeneilhou/livewire-tailwind-modal/resources/js/modals.js';

使用

从普通 blade 视图调用

<button type="button" onclick="Livewire.dispatch('showModal', {data: {'alias' : 'modals.example'}})">
                            Click me to open modal
                        </button>

显示模态框

通过触发带有组件别名的 showModal 事件来显示模态框

<div>
    <button type="button"wire:click="$dispatch('showModal', {data: {'alias' : 'modals.example'}})">
Click me
    </button>
</div>

挂载参数

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

<div>
    <button type="button" wire:click="$dispatch('showModal', {data: {'alias' : 'modals.example', 'params' : {'name': 'test'}, 'size': '4', 'title': 'Test Modal'}})">
    Click me to open modal
</button>
</div>

上述示例中组件的 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');
}

发布资源

自定义视图

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

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

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

kezeneilhou / livewire-tailwind-modal

维护者

详细信息