phpshko / laravel-livewire-depdrop
Laravel Livewire depdrop 组件
dev-main
2021-04-13 00:03 UTC
Requires
- php: ^7.3|^8.0
- livewire/livewire: ^2.0
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 来捕获下拉菜单被选择的情况
演示
当 hideOnParentEmpty 和 hideOnValuesEmpty 为 true 时