README

屏幕截图

需求

Laravel 8+
Livewire 2+
Bootstrap 5
TomSelect（如果您想使用自定义下拉列表）

安装

  composer require markrefaat/livewire-modal

用法/示例

<?php

namespace App\Http\Livewire;

use Markrefaat\LivewireModal\LivewireModal;
use Markrefaat\LivewireModal\LivewireModalField;

class UserModal extends LivewireModal
{
    public $user;
    public $age;
    public $selectedUser;

    public function setUp()
    {
        $this->setModalId("userModal")
            ->setModalTitle("Create User")
            ->setOnOpenModalFunction("create")
            ->setModalType("formModal")
            ->setSubmitButtonText("Save")
            ->setSubmitButtonFunction("save");
    }

    public function getFieldsProperty()
    {
        return [
            LivewireModalField::type('dropdown')
                ->label('Users List')
                ->required(true)
                ->varName('selectedUser')
                ->options('users')
                ->optionValue('id')
                ->optionName('name'),
            LivewireModalField::type('text')
                ->label('Name')
                ->required(true)
                ->varName('user'),
            LivewireModalField::type('number')
                ->label('Age')
                ->varName('age'),
        ];
    }

    protected function rules()
    {
        return [
            'user' => ['required']
        ];
    }

    // Call on open modal
    public function create()
    {}

    // Call on submit form
    public function save()
    {}
}

<livewire:user-modal />

<a data-bs-toggle="modal" data-bs-target="#userModal" class="btn btn-primary" 
onclick="window.livewire.emit('userModal')">Open User Modal</a>

文档

1. setUp 函数

示例

public function setUp()
    {
        $this->setModalId("tempModal")
            ->setModalTitle("Modal Title")
            ->setOnOpenModalFunction("create")
            ->setModalType("formModal")
            ->setSubmitButtonText("Save")
            ->setSubmitButtonFunction("save");
    }

setModalId( 触发打开模态的模型 ID )

setModalTitle( "显示在模态中的标题" )

setOnOpenModalFunction( "模态打开时调用的函数名称" )

setModalType( (formModal, confirmationModal) )

setShowCloseButton( (true, false) "默认为 true". ) 可选: 在提交按钮左侧显示/隐藏关闭按钮

setShowCloseIcon( (true, false) "默认为 true". ) 可选: 在标题右侧显示/隐藏关闭图标

如果您选择 "formModal" 模型类型

setSubmitButtonText( "提交按钮显示的文本" )

setSubmitButtonFunction( "提交按钮函数名称" )

如果您选择 "confirmationModal" 模型类型

setConfirmButtonFunction( "确认按钮函数名称" )

setConfirmButtonText( "确认按钮显示的文本" )

setConfirmMessage( "确认消息" )

2. getFieldsProperty 函数（如果您选择 "formModal" 模型类型）

返回 LivewireModalField 列表。

3. getOptionsListProperty 函数（如果您选择 "formModal" 模型类型）

示例

public function getOptionsListProperty()
    {
        return [
            'users' => User::get(),
        ];
    }

4. LivewireModalField（如果您选择 "formModal" 模型类型）

type: 输入类型（checkbox, date, datetime-local, email, file, number, password, text, textarea, dropdown）。

varName: 与输入 "wire:model" 相连的 PHP 变量。

label 可选 : 输入上方的标签。

placeholder 可选: 输入占位符。

required 可选: 在标签和占位符中显示 *（true, false）"默认为 false"。

disabled 可选: (true, false) "默认为 false"。

class 可选: 输入的 Bootstrap 类（默认 col-12）。

如果您选择下拉列表类型

options: 从 getOptionsListProperty() 列表中的键。

optionName: 下拉列表显示的值 "例如名称"。

optionValue: 下拉列表的实际值 "例如 id"。

optionMulti 可选: 用户可以选择的最多项目数。

defer 可选: "wire:model.defer"（true, false）"默认为 true"。

5. 辅助函数

$this->closeModal();

$this->resetModal();

$this->resetModalExcept(['user', 'age']);

markrefaat / livewire-modal

维护者

详细信息