phpshko/laravel-livewire-depdrop

Laravel Livewire depdrop 组件

dev-main 2021-04-13 00:03 UTC

This package is auto-updated.

Last update: 2024-09-13 07:57:34 UTC


README

此包提供依赖下拉菜单

🚀 安装

您可以通过composer安装此包

composer require phpshko/laravel-livewire-depdrop

发布资源

发布资源是可选的,除非您想自定义此包。

php artisan vendor:publish --provider="Phpshko\LaravelLivewireDepDrop\LaravelLivewireDepDropProvider" --tag=views

使用方法

创建您的Livewire组件并扩展

如下

<?php

namespace App\Http\Livewire;

use Phpshko\LaravelLivewireDepDrop\DepDropComponent;

class CountryDropdown extends DepDropComponent
{
    public function getValues(): array
    {
        return Country::get()->pluck('name', 'id');
    }
}

或者这样(使用父下拉值)

<?php

namespace App\Http\Livewire;

use Phpshko\LaravelLivewireDepDrop\DepDropComponent;

class StateDropdown extends DepDropComponent
{
    public function getValues(): array
    {
        return State::where('country_id', $this->parentValue)->pluck('name', 'id');
    }
}

在视图中

对于根下拉菜单

@livewire('country-dropdown', ['depId' => 'country', 'placeholder' => 'Select country'])

对于依赖下拉菜单需要设置 parentId 如下

@livewire('state-dropdown', ['depId' => 'state', 'parentId' => 'country', 'placeholder' => 'Select state'])

您还可以设置属性(在视图中或组件类中)

占位符

名称

CSS类

hideOnParentEmpty

hideOnValuesEmpty

下拉菜单的数量没有限制

    @livewire('country-dropdown', ['depId' => 'country', 'placeholder' => 'Select country'])

    @livewire('state-dropdown', ['depId' => 'state', 'parentId' => 'country', 'placeholder' => 'Select state'])

    @livewire('city-dropdown', ['depId' => 'city', 'parentId' => 'state', 'placeholder' => 'Select city'])

    @livewire('area-dropdown', ['depId' => 'area', 'parentId' => 'city'])

事件

您可以监听事件 depdropSelected 来捕获下拉菜单被选择的情况

演示

Demo 1

当 hideOnParentEmpty 和 hideOnValuesEmpty 为 true 时

Demo 2