包简介

bootstrap 4 based livewire modal

README 文档

README

Wire Elements Modal is a Livewire component inspired by wire-elements/modal

Installation

Click the image above to read a full article on using the Wire Elements modal package or follow the instructions below.

To get started, require the package via Composer:

composer require scchethu/bs-wire-modal

Livewire directive

Add the Livewire directive @livewire('livewire-bs4-ui-modal') directive to your template.

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

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

Alpine

Livewire Elements Modal requires Alpine. You can use the official CDN to quickly include Alpine:

<!-- Alpine v2 -->
<script src="https://cdn.jsdelivr.net/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

The base modal is made with BS4. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.

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

Creating a modal

You can run php artisan make:livewire EditUser to make the initial Livewire component. Open your component class and make sure it extends the ModalComponent class:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

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

Opening a modal

To open a modal you will need to emit an event. To open the EditUser modal for example:

<!-- 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>

Security

If you are new to Livewire I recommend to take a look at the security details. In short, it's very important to validate all information given Livewire stores this information on the client-side, or in other words, this data can be manipulated. Like shown in the examples above, use the Guard facade to authorize actions.

License

Boostrap 4 Wire Modal is open-sourced software licensed under the MIT license.

scchethu/bs-wire-modal 适用场景与选型建议

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

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

围绕 scchethu/bs-wire-modal 我们能提供哪些服务？

定制开发 / 二次开发

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

BUG 修复 & 性能优化

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

项目外包 & 长期维护

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

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

scchethu/bs-wire-modal

包简介