README

Livewire Easy Tags

Livewire Easy Tags是一个强大且便捷的软件包，通过简化标签和标签输入的工作流程，增强了Livewire的使用体验。使用此软件包，您可以将标签功能轻松集成到Livewire组件中，使用户能够轻松地添加、编辑、删除标签，并为标签添加颜色。

安装

要安装Livewire Easy Tags，请使用Composer

composer require codekinz/livewire-easy-tags

先决条件

Laravel 7.x或更高版本
Livewire 2.x或更高版本
Alpine Js 3.x或更高版本
Tagify 3.x或更高版本
Tailwind 2.x或更高版本

入门指南

设置

通过Composer安装包后，您可能需要将服务提供者添加到您的config/app.php文件中

// config/app.php

'providers' => [
    // Other service providers
    Codekinz\LivewireEasyTags\LivewireEasyTagsServiceProvider::class,
],

发布迁移和配置文件

php artisan vendor:publish --tag=livewire-easy-tags

运行迁移

php artisan migrate

设置Livewire组件

为了使用Livewire easy tags，您首先需要创建一个Livewire组件

php artisan make:livewire Tags

在Livewire Tags组件中，您需要扩展LivewireEasyTags而不是Livewire类。您的标签组件应该看起来像这样

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Codekinz\LivewireEasyTags\Components\LivewireEasyTags;
use Codekinz\LivewireEasyTags\Contracts\HasEasyTags;
use Codekinz\LivewireEasyTags\Traits\InteractsWithTags;

class Tags extends LivewireEasyTags implements HasEasyTags
{
    use InteractsWithTags;
}

将特性添加到Laravel模型中

此软件包使用Laravel Spatie Tags作为底层软件包。因此，为了使用其功能，您需要在模型类中使用此特性HasSpatieTags。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Codekinz\LivewireEasyTags\Traits\HasSpatieTags;

class YourModel extends Model
{
    use HasFactory, HasSpatieTags;
    ...
}

使用

现在我们已经准备好了。我们只需要在blade文件中调用我们的Livewire组件。

 @livewire('dashboard',
        [
            'modelClass' => App\Models\User::class,
            'modelId' => 2,
            'tagType' => 'flights'
        ])

以下是参数的解释

modelClass是您希望与标签关联的模型的类
modelId是记录标识符，即主键值
tagType允许您为多个模块设置标签。例如，如果您需要为多个模块（如旅游、预订和航班）使用标签，则tagType参数将派上用场。

配置

配置文件位于config/livewire-easy-tags.php。您可以在该文件中全局更改配置，或者如果您想拥有多个标签组件，您可以使用此功能在您的Tags组件中。

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Codekinz\LivewireEasyTags\Components\LivewireEasyTags;
use Codekinz\LivewireEasyTags\Contracts\HasEasyTags;
use Codekinz\LivewireEasyTags\Traits\InteractsWithTags;

class Tags extends LivewireEasyTags implements HasEasyTags
{
    use InteractsWithTags;

    protected function configurations(): array
    {
       return [
            'colors' => [
                'lightblue' => '#add8e6',
                'lightgreen' => '#90ee90',
                'pink' => '#ffc0cb',
            ],
            'default_color' => 'yellow'
        ];
    }
}

常见问题解答

问题：如何添加或更改标签的颜色？
答案：如果您点击任何标签，您将看到一个包含颜色列表和删除按钮的下拉菜单。选择任何颜色，您将看到效果。

问题：如何永久删除标签？
答案：就像之前一样，您需要点击标签，您将看到一个包含颜色列表和删除按钮的下拉菜单。单击删除按钮即可永久删除该标签。

问题：如何编辑标签？
答案：双击标签并编辑它。

主要贡献者

Zain Farooq

许可证

Livewire Easy Tags是开源软件，采用MIT许可证，由Codekinz提供支持

codekinz / livewire-easy-tags

维护者

详细信息