包简介

turn laravel livewire component into modal

README 文档

README

Turn Laravel Livewire Component into Modal.

🏷 Features

Modal triggered by javascript i.e. opens instantly without waiting for livewire network round trip to finish ( no laggy feeling )
Skeleton loading indicator
Support alert message ( info, warning, success, danger )
Trigger from Alpine Component / Vanilla JS / Livewire Class Component

🧾 Requirements

Bootstrap	4 or 5	no bootstrap support coming soon
Jquery		for bootstrap 4 only
Laravel	>= 7
Livewire	>= 2.0
Alpine JS

📥 Installation

composer require devsrv/livewire-modal

Include the base modal component

<html>
<head>
    ...
    @livewireStyles
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
    ...
    <x-livewiremodal-base /> 👈
    @livewireScripts
</body>
</html>

Publish assets

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public

Publish config

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=config

config support bootstrap theme: bs4 | bs5

📌 Updating

Important: when updating the package make sure to re-publish the assets with --force flag

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public --force

⚗️ Usage

Create Livewire Component

No consideration required, create livewire component as usual. Use livewire's mount to handle passed parameters

✨ Open Modal

✔️ From Alpine Component

<div x-data>
  <button type="button" x-on:click='$dispatch("open-x-modal", {
    title: "Heading Title",
    modal: "livewire-component-name",
    size: "xl",
    args: {{ json_encode($data_array) }}
  })'>open
  </button>
</div>

✔️ Via Vanilla JS

<button type="button" onclick='_openModal("Heading", "component-name", {{ json_encode($data) }}, "sm")'>
  open
</button>

✔️ Via Trigger Blade Component

<x-livewiremodal-trigger class="btn" 
	title="Modal Heading"
	modal="component-name"
   :args="['sky' => 'blue', 'moon' => 1]" 
   lg>open
</x-livewiremodal-trigger>

✔️ From Livewire Class

$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);

💡 Modal size supports sm lg xl // completely optional

🌈 Bonus

you are free to put content in livewire view file in any structure, however the package provides an blade component for bootstrap modal which you can use as:

<x-livewiremodal-modal>
    <div class="row">
        ...
    </div>
    ...

    <x-slot name="footer">
        ...
        <button type="button" class="..">Save</button>
    </x-slot>
</x-livewiremodal-modal>

✌🏼 Two reasons to use this component

🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes

🟢 alert notification message which can be triggered by:

$this->info('<strong>Hi !</strong>, i am an alert');  // support `info` `warning` `success` `danger`

Changelog

Please see CHANGELOG for more information on what has changed recently.

License

The MIT License (MIT). Please see License File for more information.

👋🏼 Say Hi!

Leave a ⭐ if you find this package useful 👍🏼, don't forget to let me know in Twitter

devsrv/livewire-modal 适用场景与选型建议

devsrv/livewire-modal 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 8.26k 次下载、GitHub Stars 达 13，最近一次更新时间为 2021 年 05 月 01 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「modal」「livewire」「livewire-modal」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 devsrv/livewire-modal 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 devsrv/livewire-modal 我们能提供哪些服务？

定制开发 / 二次开发

基于 devsrv/livewire-modal 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 devsrv/livewire-modal 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

levmyshkin/micromodal 0

Fork from ghosh/Micromodal. Tiny, dependency-free javascript library for creating accessible modal dialogs.

lunarphp/livewire-starter-kit 204

Livewire starter kit for Lunar e-commerce.

sanzgrapher/filament-draggable-modal 18

Make Filament modals draggable.

yousefaman/filament-modal-repeater 17

A Filament form component that displays repeater items in a table with modal-based editing.

ahmed-hussain/hasmany-to-modal 1

A Laravel Nova field. To create a modal for creating or viewing related HasMany records without leaving the index page

antkaz/yii2-ajax 2

devsrv/livewire-modal

包简介

关键字：