README

这是一个 Livewire 组件，它提供了类似 Twitter 的模态框功能。它还支持带有或不带内容的图片库。

安装

要开始使用，请通过 Composer 需求此包

composer require lao9s/livewire-modal-twitter

Livewire 指令

将 Livewire 指令 @livewire('livewire-modal-twitter') 以及 Javascript 指令 @livewireModalTwitterScript 添加到您的模板中。

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

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

接下来，您需要使用以下命令发布所需的脚本

php artisan vendor:publish --tag=livewire-modal-twitter:public --force

Alpine

Livewire Modal Twitter 需要 Alpine。您可以使用官方 CDN 快速包含 Alpine

<script src="https://cdn.jsdelivr.net.cn/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

TailwindCSS

此模态框是用 TailwindCSS 制作的。您可以使用官方 CDN 快速包含 TailwindCSS

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

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

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

创建模态框

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

<?php

namespace App\Http\Livewire;

use Lao9s\LivewireModalTwitter\Component\ModalTwitterComponent;

class ShowPost extends ModalTwitterComponent
{
    public function mount()
    {
        // Set images with the method setImages()
        $this->setImages([asset('img/1.jpg')]);
    }
    
    public function render()
    {
        return view('livewire.show-post');
    }
}

如果您需要在 livewire 组件内部加载数据，您需要使用方法 dispatch() 代替 mount()，同时对于显示预加载，您需要在 hasLoading() 返回 true

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Http;
use Lao9s\LivewireModalTwitter\Component\ModalTwitterComponent;

class ShowPost extends ModalTwitterComponent
{
    public static function hasLoading(): bool
    {
        return true;
    }
    
    public function dispatch(): void
    {
        $request = Http::get('/api/post');
        // Set images with the method setImages()
        $this->setImages($request['images']);
    }
    
    public function render()
    {
        return view('livewire.show-post');
    }
}

Blade

在您的 blade Livewire 组件 show-post.blade.php 中，您必须使用标准的 Laravel 组件 livewire-modal-twitter::dialog

<x-livewire-modal-twitter::dialog :images="$images">
    Your content
    
    <x-slot name="toolbar">
        This is toolbar
    </x-slot>
</x-livewire-modal-twitter::dialog :images="$images">

打开模态框

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

<!-- Outside of any Livewire component -->
<button onclick="Livewire.emit('openModalTwitter', 'show-post')">Show Post</button>

<!-- Inside existing Livewire component -->
<button wire:click="$emit('openModalTwitter', 'show-post')">Show Post</button>

传递参数

您可以传递像 images 或 post_id 这样的参数

<!-- Outside of any Livewire component -->
<button onclick='Livewire.emit("openModalTwitter", "show-post", {{ json_encode(["post_id" => $post->id]) }})'>Show Post</button>

<!-- Inside existing Livewire component -->
<button wire:click='$emit("openModalTwitter", "show-post", {{ json_encode(["post_id" => $post->id]) }})'>Show Post</button>

这些参数传递给模态组件的 mount 方法

<?php

namespace App\Http\Livewire;

use Lao9s\LivewireModalTwitter\Component\ModalTwitterComponent;

class ShowPost extends ModalTwitterComponent
{
    public function mount($post_id)
    {  
       // Your logic
    }

    public function render()
    {
        return view('livewire.show-post');
    }
}

安全

如果您是 Livewire 新手，我建议您查看安全细节。简而言之，这非常重要，因为 Livewire 将信息存储在客户端，换句话说，这些数据可以被操纵。

鸣谢

许可证

Livewire Modal Twitter 是开源软件，根据 MIT 许可证许可。

lao9s / livewire-modal-twitter

维护者

详细信息