README

简介

Modal是一个为livewire/filament应用程序提供的基模弹窗包。该包基于wire-elements-modal。

安装

composer require jacklove315/modal

发布配置

如果您需要更改模态的默认功能，可以通过发布配置并做出必要的更改来实现

php artisan vendor:publish

然后在控制台提示符下选择

 › ● Provider: Jacklove315\Modal\ServiceProvider   

配置已发布到 config/jl-modal.php

/*
|--------------------------------------------------------------------------
| Modal Component Defaults
|--------------------------------------------------------------------------
|
| Configure the default properties for a modal component.
|
| Supported modal_size;
| 'sm', 'md', 'lg'
*/
return [
    'component_defaults' => [
        'close_modal_on_click_away' => true,
        'close_modal_on_escape'     => false,
        'modal_size'                => 'md'
    ]
];

使用

将包包含到您的应用程序中

在您的应用程序根文件中，例如 app.blade.php，您可以注册组件，使其在应用程序中全局可用

@livewire('jl-modal')

将Livewire组件注册为模态

您需要在任何想要制作模态的Livewire组件中扩展 ModalComponent。

<?php

namespace App\Http\Livewire;

use Jacklove315\Modal\ModalComponent;

class DeleteOrganisationModal extends ModalComponent
{
    public function render()
    {
        return view('livewire.delete-organisation');
    }
}

配置单个模态组件

如果您查看 ModalComponent，您会注意到有3个可以重写的函数。这些选项可以按模态或全局通过发布配置进行配置

public static function closeModalOnClickAway(): bool
{
    return config('jl-modal.component_defaults.close_modal_on_click_away', true);
}

public static function closeModalOnEscape(): bool
{
    return config('jl-modal.component_defaults.close_modal_on_escape', false);
}

public static function modalSize(): string
{
    return config('jl-modal.component_defaults.modal_size', 'md');
}

确保此组件（DeleteOrganisationModal.php）位于您的应用程序的Livewire目录中，以便自动注册并绑定到Laravel服务容器。您还可以选择在服务提供程序中手动注册组件

Livewire::component('delete-organisation-modal', DeleteOrganisationModal::class);

打开模态

您可以通过从应用程序的任何地方发出 open-modal 事件来打开模态（只要包组件已注册在应用程序的根目录中）

$data 必须是键值对的json数组

<button wire:click="$emit('open-modal', 'delete-organisation-modal', $data)">
    Open modal
</button>

关闭模态

您可以从模态组件内部调用 $this->closeModal

<?php

namespace App\Http\Livewire;

use Jacklove315\Modal\ModalComponent;

class DeleteOrganisationModal extends ModalComponent
{
    public function render()
    {
        return view('livewire.delete-organisation-modal');
    }

    public function submitForm()
    {
        $this->closeModal();
    }
}

许可证

Modal是一个开源软件，受MIT许可证许可。