README

将组合框添加到您的Livewire表单

您拥有大量数据集，并且需要能够在下拉列表中显示它吗？

当基本选择输入不足时，您可以使用组合框！

组合框的工作方式类似于选择输入，但它显示一个可以通过输入进行筛选的选项列表。

您不再需要在启动时下载所有数据，只需获取您要查找的数据即可。

安装

您可以通过composer安装此包

composer require sertxudeveloper/livewire-combobox

用法

安装完包后，您可以在Livewire表单中使用它。

首先，您需要在终端中执行以下命令

php artisan combobox:make UsersCombobox -m User

这将创建一个位于app/Livewire目录的新组件。

新的UsersCombobox组件将如下所示

<?php

namespace App\Livewire;

use App\Models\User;
use SertxuDeveloper\LivewireCombobox\Components\Combobox;

class UsersCombobox extends Combobox
{

    /** @var class-string<Model> $model */
    public string $model = User::class;

}

如您所见，$model属性设置为User模型。这意味着组件将能够使用此模型查询数据库。

默认情况下，组件将显示模型的name列。您可以通过设置labelColumn属性来更改此设置

/**
 * The column to be shown as the label.
 *
 * @var string
 */
public string $labelColumn = 'title'; // Default: 'name'

要开始使用组件，您需要将其添加到Livewire表单中。

<livewire:users-combobox>

@livewire('users-combobox')

您还可以向组件传递一些参数

<livewire:users-combobox name="author" label="Author" placeholder="Select a user">

警告

如果您没有传递任何参数，组件将使用默认值。
建议向组件传递参数。
您还可以在类中添加值来覆盖默认值。

事件

在与组件交互时，可能会触发一些事件。

事件名称取决于组件名称，这使得您可以在表单中拥有多个组合框。

• selected-<component-name>：当用户从下拉列表中选择一个选项时。
• cleared-<component-name>：当用户清除选定的选项时。

这些事件将被触发，以便父组件可以对用户的交互做出反应。

注意

selected事件包含作为参数的选定的模型。

添加过滤器

您可以通过向组件添加过滤器来过滤结果。

/**
 * Apply filters to the query.
 *
 * @param Builder $query
 * @return void
 */
protected function filter(Builder $query): void {
    $query->where('email', 'like', "%@example.com");
}

filter方法接收查询构建器作为参数，因此您可以添加任意数量的过滤器。

过滤器将在获取结果之前应用于查询，因此您可以使用它们来限制用户收到的选项。

测试

此包包含测试，您可以使用以下命令运行它们

composer test

贡献

有关详细信息，请参阅CONTRIBUTING

安全漏洞

请查阅我们的安全策略，了解如何报告安全漏洞。

鸣谢

• Sergio Peris
• 所有贡献者

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件

版权所有©2022 Sertxu开发者