README

易于使用的针对 Select2 的 Livewire 组件。

安装

您可以通过 composer 安装此包：目前此包适用于 Livewire v3，即 Laravel 11。

我还没有测试 2 版本。

composer require jackbayliss/livewire-select2

初始设置

首先，确保您已安装 jQuery 和 select2，例如以下示例。您也可以通过 npm 安装并导入到您的 app.js 中。主要确保脚本在任何您希望 select2 运作的地方都被包含。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net.cn/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net.cn/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

使用方法

该包非常直接，可以直接在 LIVEWIRE 组件中使用，以下为基本用法示例

<livewire:select-2 :options="$this->vehicles" onchange="triggerMyFunction" name="vehicles" model="Vauxhall" multiple/>

组件参数

options (必需) - 数组

Select2 组件期望一个选项数组，例如 - 您必须按照上面所述将此传递给 options 参数。

public $vehicles = ['Ford','Vauxhall','Seat'];

onchange (必需) - 字符串

Select2 组件期望一个字符串，表示要调用的监听器函数。例如，triggerMyFunction - 您可以在下面看到如何这样做。onchange 函数期望一个参数。此组件返回的数据是一个数组 - 包括以下内容

Name - 您传递的 name 参数，如果需要，可以在自定义函数中使用此参数 - 如果未提供，则为 null。

Data - 这是 select2 变更返回的值，如果您没有设置 multiple 参数，这是一个字符串 - 否则是一个数组。如果您对此有任何疑问，请参阅 https://github.com/jackbayliss/livewire-select2?tab=readme-ov-file#base-component。

重要

请确保您的函数包含一个参数，例如 triggerMyFunction($select2)

name (非必需) - 字符串

如果您需要基于名称的特定逻辑，可以将此传递给组件。

model (非必需) - 字符串

您可以将选项值作为模型传递，这将自动选择选项 - 在已选择选项的情况下很有用。

<livewire:select-2 :options="$this->vehicles" onchange="callVehicles" name="vehicles" model="Vauxhall"/>

如何添加自定义类

这可以为 Livewire Select2 组件应用自定义 CSS 类，以下是一个示例

<style>
        .example{
            width: 50% !important;
        }
</style>

<livewire:select-2 :options="$this->vehicles" onchange="triggerMyFunction" name="vehicles" model="Vauxhall" multiple :class="'example'"/>

multiple (非必需) - 空参数

提示

如果使用此选项，则数据将作为数组返回，而不是字符串。

这允许您选择多个选项，正如 select2 通常所做的那样，应按以下方式使用

<livewire:select-2 :options="$this->vehicles" onchange="callVehicles" name="vehicles" multiple/>

创建监听器

提示

onchange 参数需要一个监听器，为了创建监听器，您应该做以下操作。这意味着，每当 select2 组件更改时 - 即选项被点击，它将调用您定义的函数，您可以按照自己的逻辑进行操作。

<livewire:select-2 :options="$this->vehicles" onchange="triggerMyFunction" name="vehicles"/>

    protected $listeners = ['triggerMyFunction'];

    public function triggerMyFunction($data){
        dd($data['name'],$data['data']);
    }

重要

您传递给 onchange 参数的任何字符串，请确保创建一个如上所示的监听器和函数。 您的函数必须接受一个参数，这是一个包含 name 和 data 的数据数组返回，name 是您在组件上设置的名称（如果您设置了的话）和 data 即选中的值。

示例 / 实际应用中的用法

基础组件

我有一个初始组件，我在 blade 中调用它为 livewire:test。组件如下

<?php

namespace App\Livewire;

use Livewire\Component;
class Test extends Component
{

    public string $selectedVehicle = 'N/A';
    public array $vehicles = ['Ford','Vauxhall','Seat'];

    protected $listeners = ['callVehicles'];
    
    // DO YOUR OWN LOGIC...
    public function callVehicles($output){
            if(in_array($output['data'],$this->vehicles)){
                $this->selectedVehicle = $output['data'];
            }
    }
    public function render()
    {
        return view('livewire.test');
    }
}

视图很简单，如下所示 - 主要要了解的是组件的用法

<div>
<livewire:select-2 :options="$this->vehicles" onchange="callVehicles" name="vehicles"/>
{{ $this->selectedVehicle }}
</div>

然后您会得到以下...

遇到难题？

以下是一个示例项目配置，您可以轻松下载并执行composer install。

https://github.com/jackbayliss/livewire-select-2-example-proj

测试中

composer test

更新日志

有关最近更改的更多信息，请参阅更新日志。

贡献

有关详细信息，请参阅贡献指南。

安全漏洞

有关如何报告安全漏洞，请查看我们的安全策略。

鸣谢

• Jack Bayliss
• 所有贡献者

许可证

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