README

关于 Wire Elements 弹出

Wire Elements 弹出是一个 Livewire 组件，它提供了一个支持多个子弹出的模态框，同时保持状态。

安装

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

要开始，使用 Composer 需要此包

composer require wire-elements/modal

Livewire 指令

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

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

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

Alpine

Livewire Elements 弹出需要 Alpine 和插件Focus。您可以使用官方 CDN 快速包含 Alpine

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

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

TailwindCSS

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

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

创建模态框

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

<?php

namespace App\Http\Livewire;

use LivewireUI\Modal\ModalComponent;

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

打开模态框

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

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

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

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

传递参数

要打开特定用户的 EditUser 模态框，我们可以传递用户 ID

<!-- Outside of any Livewire component -->
<button onclick="Livewire.emit('openModal', 'edit-user', {{ json_encode(['user' => $user->id]) }})">Edit User</button>

<!-- Inside existing Livewire component -->
<button wire:click="$emit('openModal', 'edit-user', {{ json_encode(['user' => $user->id]) }})">Edit User</button>

<!-- If you use a different primaryKey (e.g. email), adjust accordingly -->
<button wire:click="$emit('openModal', 'edit-user', {{ json_encode(['user' => $user->email]) }})">Edit User</button>

<!-- Example of passing multiple parameters -->
<button wire:click="$emit('openModal', 'edit-user', {{ json_encode([$user->id, $isAdmin]) }})">Edit User</button>

参数被注入到模态组件中，如果类型已定义，模型将自动从数据库中获取

<?php

namespace App\Http\Livewire;

use App\Models\User;
use LivewireUI\Modal\ModalComponent;

class EditUser extends ModalComponent
{
    // This will inject just the ID
    // public int $user;

    public User $user;

    public function mount()
    {
        Gate::authorize('update', $this->user);
    }

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

参数还传递到模态组件的 mount 方法。

打开子模态框

从现有的模态框，您可以使用完全相同的事件，并将创建一个子模态框

<!-- Edit User Modal -->

<!-- Edit Form -->

<button wire:click='$emit("openModal", "delete-user", {{ json_encode(["user" => $user->id]) }})'>Delete User</button>

关闭（子）模态框

例如，如果用户点击“删除”按钮，将打开一个确认对话框，您可以通过发出 closeModal 事件取消删除并返回到编辑用户模态框。这将打开上一个模态框。如果没有上一个模态框，整个模态组件将被关闭，状态将被重置。

<button wire:click="$emit('closeModal')">No, do not delete</button>

您也可以从您的模态组件类中关闭模态框

<?php

namespace App\Http\Livewire;

use App\Models\User;
use LivewireUI\Modal\ModalComponent;

class EditUser extends ModalComponent
{
    public User $user;

    public function mount()
    {
        Gate::authorize('update', $this->user);
    }

    public function update()
    {
        Gate::authorize('update', $this->user);

        $this->user->update($data);

        $this->closeModal();
    }

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

如果您不想回到上一个模态框但关闭整个模态组件，您可以使用 forceClose 方法

public function update()
{
    Gate::authorize('update', $this->user);

    $this->user->update($data);

    $this->forceClose()->closeModal();
}

通常，当发生变化时，您会希望更新其他 Livewire 组件。例如，当用户被更新时，用户概览。您可以使用 closeModalWithEvents 方法来实现这一点。

public function update()
{
    Gate::authorize('update', $this->user);

    $this->user->update($data);

    $this->closeModalWithEvents([
        UserOverview::getName() => 'userModified',
    ]);
}

您还可以向事件添加参数

public function update()
{
    $this->user->update($data);

    $this->closeModalWithEvents([
        UserOverview::getName() => ['userModified', [$this->user->id]],
    ]);
}

更改模态属性

您可以通过覆盖您的模态组件类中的静态 modalMaxWidth 方法来更改模态框的宽度（默认值 '2xl'）

/**
 * Supported: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
 */
public static function modalMaxWidth(): string
{
    return 'xl';
}

默认情况下，当您按下 escape 键时，模态框将关闭。如果您想禁用此行为，例如防止意外关闭模态框，您可以重写静态 closeModalOnEscape 方法并使其返回 false。

public static function closeModalOnEscape(): bool
{
    return false;
}

默认情况下，当您单击模态框外部时，模态框将关闭。如果您想禁用此行为，例如防止意外关闭模态框，您可以重写静态 closeModalOnClickAway 方法并使其返回 false。

public static function closeModalOnClickAway(): bool
{
    return false;
}

默认情况下，通过按Esc键关闭模态会强制关闭所有模态。如果您想禁用此行为，例如，允许按Esc显示上一个模态，您可以重写静态方法closeModalOnEscapeIsForceful并使其返回false。

public static function closeModalOnEscapeIsForceful(): bool
{
    return false;
}

当一个模态关闭时，您可以选择启用一个modalClosed事件。此事件会在调用closeModal、按Esc键或点击模态外部时触发。将作为参数提供关闭组件的名称；

public static function dispatchCloseEvent(): bool
{
    return true;
}

默认情况下，当一个子模态关闭时，如果再次打开相同的模态组件，关闭组件的状态仍然可用。如果您想在关闭时销毁组件，可以重写静态方法destroyOnClose并使其返回true。当再次打开已销毁的模态时，其状态将被重置。

public static function destroyOnClose(): bool
{
    return true;
}

跳过上一个模态

在某些情况下，您可能想要跳过上一个模态。例如

团队概述模态
-> 编辑团队
-> 删除团队

在这种情况下，当团队被删除时，您不想回到步骤2，而是返回到概览。您可以使用skipPreviousModal方法来实现这一点。默认情况下，它会跳过上一个模态。如果您想跳过更多，可以传递要跳过的模态数量skipPreviousModals(2)。

<?php

namespace App\Http\Livewire;

use App\Models\Team;
use LivewireUI\Modal\ModalComponent;

class DeleteTeam extends ModalComponent
{
    public Team $team;

    public function mount(Team $team)
    {
        $this->team = $team;
    }

    public function delete()
    {
        Gate::authorize('delete', $this->team);

        $this->team->delete();

        $this->skipPreviousModal()->closeModalWithEvents([
            TeamOverview::getName() => 'teamDeleted'
        ]);
    }

    public function render()
    {
        return view('livewire.delete-team');
    }
}

您还可以选择调用destroySkippedModals()方法来销毁跳过的模态，这样如果再次打开它们，其状态将被重置

为生产构建Tailwind CSS

要清除包使用的类，请将以下行添加到tailwind.config.js中的purge数组

'./vendor/wire-elements/modal/resources/views/*.blade.php',
'./storage/framework/views/*.php',

因为一些类是动态构建的，所以您应该将一些类添加到purge安全列表中，因此您的tailwind.config.js应该看起来像这样

module.exports = {
  purge: {
    content: [
      './vendor/wire-elements/modal/resources/views/*.blade.php',
      './storage/framework/views/*.php',
      './resources/views/**/*.blade.php',
    ],
    options: {
      safelist: [
        'sm:max-w-2xl'
      ]
    }
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

配置

您可以通过livewire-ui-modal.php配置文件自定义模态。这包括一些额外的选项，例如，如果您在应用程序中不使用TailwindCSS，则包括CSS，以及默认的模态属性。

要发布配置，请运行vendor:publish命令

php artisan vendor:publish --tag=livewire-ui-modal-config

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Include CSS
    |--------------------------------------------------------------------------
    |
    | The modal uses TailwindCSS, if you don't use TailwindCSS you will need
    | to set this parameter to true. This includes the modern-normalize css.
    |
    */
    'include_css' => false,


    /*
    |--------------------------------------------------------------------------
    | Include JS
    |--------------------------------------------------------------------------
    |
    | Livewire UI will inject the required Javascript in your blade template.
    | If you want to bundle the required Javascript you can set this to false
    | and add `require('vendor/wire-elements/modal/resources/js/modal');`
    | to your script bundler like webpack.
    |
    */
    'include_js' => true,


    /*
    |--------------------------------------------------------------------------
    | Modal Component Defaults
    |--------------------------------------------------------------------------
    |
    | Configure the default properties for a modal component.
    |
    | Supported modal_max_width
    | 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
    */
    'component_defaults' => [
        'modal_max_width' => '2xl',

        'close_modal_on_click_away' => true,

        'close_modal_on_escape' => true,

        'close_modal_on_escape_is_forceful' => true,

        'dispatch_close_event' => false,

        'destroy_on_close' => false,
    ],
];

安全

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

鸣谢

许可证

WireElements是开源软件，根据MIT许可证许可。

easydot / modals

维护者

详细信息