ysz/lw-range-slider

专为 Livewire Components 设计的简单 noUiSlider blade 组件。

维护者

详细信息

github.com/ghostza1209/lw-range-slider

源代码

问题

安装次数: 1,843

依赖项: 0

建议者: 0

安全: 0

星星: 1

关注者: 1

分支: 1

开放问题: 0

2.0.0 2024-07-14 06:12 UTC

Requires

MIT 200ecb7171c2fac5d3aa111fc5766183a7c226c3

  • Ysz

This package is auto-updated.

Last update: 2024-09-14 06:44:59 UTC

README

Latest Stable Version Total Downloads License

灵感来源于 https://github.com/jantinnerezo/livewire-range-slider，请查看它！

一个无需费力即可使用的 blade 组件，noUiSlider，专为您的 Livewire 组件定制。

安装

您可以通过 composer 安装此软件包。

composer require ysz/lw-range-slider

在 @livewireScripts 之后将脚本组件注册到模板中。

<html>
    <body>
        <!-- @livewireScripts -->

        <x-livewire-range-slider::scripts />
    </body>
</html>

要求

此软件包旨在与 Livewire 组件一起使用。请确保您只在 Livewire 项目中独家使用它。

如何使用它！

请将以下属性添加到您现有的 Livewire 组件中。

public $options = [
    'start' => [
        20,
        50
    ],
    'range' => [
        'min' =>  [1],
        'max' => [100]
    ],
    'connect' => true,
    'behaviour' => 'tap-drag',
    'tooltips' => true,
    'pips' => [
        'mode' => 'steps',
        'stepped' => true,
        'density' => 4
    ],
    ...
];

public array $sliderValues;

$options 属性表示提供给组件的 noUiSlider 选项。有关更多详细信息和管理配置，请参阅 noUiSlider

$sliderValues 属性是范围滑块值的模型。

Livewire 的默认 wire:model 属性

<x-range-slider :options="$options" wire:model.live="sliderValues" />

延迟更新

在不需要实时数据更新时，您可以通过将所有修饰符与下一个网络请求一起批量更新数据来移除所有修饰符。

<x-range-slider :options="$options" wire:model="sliderValues" />

懒更新

您还可以使用 .blur 修饰符在用户完成与滑块的交互后更新数据。

<x-range-slider :options="$options" wire:model.blur="sliderValues" />

触发事件

要更新 noUiSlider 的 start 或 range 值，请调用 firePriceRangeChangedEvent 方法。

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use YsZ\LwRangeSlider\Contracts\CanFireEvents;

class AvailableUnits extends Component
{
    use CanFireEvents;
    
    public function updated($name, $value)
    {
        $this->firePriceRangeChangedEvent(min: 80, max: 150, minRange: 100, maxRange: 200);
    }
}

这将立即更新 noUiSlider 的 range 和 start 值。

自定义滑块

您可以将这些 blade 文件发布到 resources/views/vendor/livewire-range-slider 并进行自定义。

php artisan vendor:publish --tag=lw-range-slider-views

要从已发布的文件中自定义 noUiSlider 选项，因为某些选项在用作回调函数时不是有效的 JSON，因此不能从 Livewire 组件传递。

<div
    x-data='LivewireRangeSlider({
        options: {
            start: [{{ $this->minPrice }}, {{ $this->maxPrice }}],
            connect: true,
            tooltips: true,
            tooltips: {
                to: function (value) {
                    return window?.currencyFormat("site", value);
                },
                from: function (value) {
                    return window?.currencyFormat("site", value);
                }
            },
            range: {
                min: {{ $this->minPrice }},
                max: {{ $this->maxPrice }}
            }
        },
        models: {!! json_encode($getWireModel($attributes)) !!},
        modifier: "{{ $getWireModelModifier($attributes) }}"
    })'
    @focusout="setValue"
    {{ $attributes }}
    wire:ignore
>
    <div x-ref="range"></div>
    {{ $slot }}
</div>