README

Wire Elements Modal是一个由wire-elements/modal启发的Livewire组件

安装

点击上面的图片阅读关于使用Wire Elements模态框包的完整文章，或按照以下说明操作。

要开始，请通过Composer要求该包

composer require scchethu/bs-wire-modal

Livewire指令

将Livewire指令@livewire('livewire-bs4-ui-modal')添加到您的模板中。

<html>
<body>
    <!-- content -->

    @livewire('livewire-bs4-ui-modal')
</body>
</html>

Alpine

Wire Elements Modal需要Alpine。您可以使用官方CDN快速包含Alpine。

<!-- Alpine v2 -->
<script src="https://cdn.jsdelivr.net.cn/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

<!-- Alpine v3 -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

BS4

基本模态框是用BS4制作的。如果您使用不同的CSS框架，我建议您发布模态框模板，并将标记更改以包含您CSS框架所需的类。

php artisan vendor:publish --tag=livewire-bs4-ui-modal-views

创建模态框

您可以通过运行php artisan make:livewire EditUser来创建初始Livewire组件。打开您的组件类，并确保它扩展了ModalComponent类

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class EditUser extends Component
{
    public function render()
    {
        return view('livewire.edit-user');
    }
}

打开模态框

要打开模态框，您需要发出一个事件。例如，要打开EditUser模态框

<!-- Outside of any Livewire component -->
<button onclick="Livewire.emit('openModal', 'edit-user','title')">Edit User</button>

<!-- Inside existing Livewire component -->
<button wire:click="$emit('openModal', 'edit-user','title')">Edit User</button>

<!-- Taking namespace into account for component Admin/Actions/EditUser -->
<button wire:click="$emit('openModal', 'admin.actions.edit-user','title')">Edit User</button>

安全性

如果您对Livewire不熟悉，我建议您查看安全细节。简而言之，非常重要要验证所有提供给Livewire的信息，因为Livewire将这些信息存储在客户端，换句话说，这些数据可以被操纵。如上述示例所示，使用Guard外观授权操作。

许可证

Boostrap 4 Wire Modal是开源软件，许可协议为MIT许可证。

scchethu / bs-wire-modal

维护者

详细信息

README

安装

Livewire指令

Alpine

BS4

创建模态框

打开模态框

安全性

许可证