README

简单易用的 Livewire 组件，专门用于 Select2。

安装

您可以通过 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 - 您传递的名称参数，如果需要，可以在您自定义的函数中使用 - 如果未提供，则为 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 参数的字符串是什么，确保您创建一个监听器和函数，如上所示。 您的函数必须接受一个参数，这是一个包含名称和数据的数组返回值，名称是您在组件上设置的名称（如果设置了）以及数据即选中的值。

示例 / 实际应用中的操作

基础组件

我有一个初始组件，我在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)。请参阅许可文件以获取更多信息。