README

需求

• Tailwind
• Alpine JS
• 在 layout blade 中使用 @stack('scripts')

安装

您可以通过 composer 安装此包

composer require etdte/livewire-multiselect

用法

1) 将 LivewireMultiselect\HasSelect 特性添加到您的组件中

class Index extends Component
{
    use LivewireMultiselect\HasSelect;

2) 向您的组件添加选择监听器

protected $listeners = ['select'];

3) 向您的组件添加可用选项和已选选项的变量

// for selected options - multiple
public ?array $teamFilter = null;
// for selected option - single
public int|string|null $teamFilter = null;

// available options
public ?Collection $teams = null;

4) 将选择添加到您的页面中

<livewire:multiselect parentId="{{ $this->id }}"
                      name="teamFilter"
                      label="name"
                      :selected="$teamFilter"
                      title="{{ __('Teams') }}"
                      :options="$teams"
                      :multiselect="true"
                      styles="w-full"></livewire:multiselect>

事件

多选组件会触发一个 select 事件，该事件会被 HasSelect 特性捕获，并将值设置到您的组件中的相应变量。
此特性还会在您的组件中调用 selected 函数（如果存在），并传递选择名称和已选项目。您可以在组件中定义一个 selected 方法以响应用户更改
仅在 :simpleForm="false" 时有效

多选

public function selected(string $name, array $value)
{
    if ($name === 'teamFilter') {
        // do something
    }
}

选择

public function selected(string $name, int|string|null $value)

属性

附加功能

您可以通过在组件中调用来刷新已选项目

// reset component variables
$this->reset('teamFilter');
$this->anotherFilter = [2,3];
// reset options on all component selects
$this->emitTo('multiselect', 'refresh', $this);

// you can also do something like this,
// BUT ALL NOT PASSED SELECTS, WITHIN THE COMPONENT, WILL BE RESET TO EMPTY.
$this->emitTo('multiselect', 'refresh', ['id' => $this->id, 'teamFilter' => [2]]);

您还可以刷新可用选项

$teams = $this->teams->take(3);
// $teams - available options
// 'teamFilter' - select name
// $this->id - component id(parentId)
$this->emitTo('multiselect', 'refreshOptions', $teams, 'teamFilter', $this->id);

自定义

您可以通过发布其视图来自定义选择的外观

php artisan vendor:publish --tag=multiselect:views

许可证

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