README

Livewire可搜索选择输入组件

要求

• Laravel 10或11
• Livewire
• Tailwind
• Alpine JS

安装

您可以通过composer安装此包

composer require fabioguin/livewire-searchable-select

基本用法

• 在您的Livewire组件中使用SearchableSelect特质

<?php

namespace App\Http\Livewire\CreateUser

use Livewire\Component;
use FabioGuin\LivewireSearchableSelect\SearchableSelect;

class CreateUser extends Component
{
    use SearchableSelect;

    // set properties to get selected value from LivewireSearchableSelect
    public int $country_id;
}

• 在您的blade视图中使用livewire-searchable-select组件，并传递参数

<livewire:select-searchable-input
        property="country_id"
        model-app="\App\Models\Country"
        model-app-scope="isActive"
        option-text="{name}"
        option-value-column="id"
        active-option-text="{{ request()->user()->country_name }}"
        active-option-value="{{ request()->user()->country_id }}"
        :search-columns="['name']"
        :search-min-chars="2"
        :search-limit-results="15"
        input-extra-classes="mt-3"
        input-placeholder="Select country" />

属性

model-app-scope

使用此参数可以定义模型的查询范围，以复杂方式过滤搜索结果（请参阅官方Laravel文档）。这使得组件更加灵活，适用于多种场景。请记住，使用不带"scope"指定的字符串，并且使用camel case语法（请参阅示例）。

自定义

Livewire Select被设计成易于自定义。您可以发布并修改配置、视图和语言文件以满足您的需求。

配置

您可以使用以下命令发布配置文件：

php artisan vendor:publish --provider="FabioGuin\LivewireSearchableSelect\LivewireSearchableSelectServiceProvider" --tag="config"

这将发布一个到您的配置目录的livewire-searchable-select.php配置文件。在这里，您可以更改Livewire Select的默认设置。

视图

如果您需要修改视图，可以使用以下命令发布它们：

php artisan vendor:publish --provider="FabioGuin\LivewireSearchableSelect\LivewireSearchableSelectServiceProvider" --tag="views"

这将发布视图文件到resources/views/vendor/livewire-searchable-select。您可以编辑这些文件以更改选择输入的外观。

语言

要自定义语言字符串，可以使用以下命令发布语言文件：

php artisan vendor:publish --provider="FabioGuin\LivewireSearchableSelect\LivewireSearchableSelectServiceProvider" --tag="lang"

这将发布语言文件到resources/lang/vendor/livewire-searchable-select。您可以编辑这些文件以更改Livewire Select使用的文本。

待办事项和未来开发

Livewire Select包目前正在开发中，并为未来的版本计划了几个功能和改进。

以下是计划的任务列表

• 支持Tailwind CSS和Bootstrap 4：目前，视图是为Bootstrap 5设计的。然而，目标是添加对Tailwind CSS和Bootstrap 4的支持。这将需要为这些CSS框架的每个版本创建单独的视图版本。
• 文档改进：文档将持续更新以反映新功能和改进。这包括添加更多示例和教程。
• 测试和错误修复：我们将继续测试此包以识别和修复任何错误。如果您发现错误，请通过GitHub上的“问题”部分报告。
• 性能改进：我们一直在寻找提高包性能的方法。这可能包括优化代码和添加新功能以提高效率。
• 支持其他Livewire功能：我们正在探索添加对其他Livewire功能的支持的可能性，例如分页和懒加载。

受https://github.com/mitratek/livewire-select启发

我们喜欢语义化版本控制https://semver.org/

欢迎合作，联系我：https://www.linkedin.com/in/fabio-guin-starzero/