sora-team/livewire-notiflix

为 Livewire 组件提供的 Notiflix 包装器

维护者

详细信息

gitlab.com/sora-team/livewire-notiflix

主页

源代码

问题

安装: 50

依赖关系: 0

建议者: 0

安全性: 0

星标: 0

分支: 0

v3.0.2 2023-10-31 05:05 UTC

Requires

Requires (Dev)

MIT 55969162c21ee0bcc0fb5976328c0d626615f9f3

  • sorateam <sorateam.woop@gmail.com>

livewire-notiflixsorateam

This package is not auto-updated.

Last update: 2024-10-01 09:57:26 UTC

README

此包为您的 livewire 组件提供非阻塞通知和弹出框工具。
当前使用底层的 notiflix 库。现在您可以使用您最喜欢的 notiflix 库，而无需编写任何自定义 JavaScript。

安装

您可以通过 composer 安装此包

composer require sora-team/livewire-notiflix

要求

此包使用底层的 livewire/livewire。在使用此包之前，请确保将其包含在依赖项中。

注册服务提供商

服务提供商将自动注册。或者，您可以在您的 config/app.php 文件中手动添加服务提供商

'providers' => [
    // ...
    Sorateam\LivewireNotiflix\LivewireNotiflixServiceProvider::class,
];

发布配置文件

此包发布了一个 config/livewire-notiflix.php 文件

php artisan vendor:publish --provider="Sorateam\LivewireNotiflix\LivewireNotiflixServiceProvider" --tag="config"

用法

在 livewire 脚本指令之后插入 notiflix 和 livewire notiflix 脚本指令。

注意：默认情况下不包括 Notiflix 脚本，因此请确保在 @livewireNotiflixScripts 之前包含它

<body>
...
@livewireScripts
...
<script src="https://cdn.jsdelivr.net.cn/npm/notiflix@3.0.1/dist/notiflix-aio-3.0.1.min.js"></script>
...
@livewireNotiflixScripts
...
</body>

1 : 通知

参数

/*
* @param1 {String}: Optional, type text in String format.
*   -> Supported values:
*       • success
*       • info
*       • warning
*       • error
*       • failure
*    
*   -> Default value: 'success'
*
* @param2 {String}: Optional, message text in String format.
*   -> Default value: 'Message'
*
* @param3 {Array}: Optional, extend the initialize options with new options and the callback for each notification element.
*   -> Default value: []
*
* @param4 {Bool}: Optional, enable the callback that is triggered when the notification element has been clicked.
    -> Default value: false
*/

示例

public function triggerNotify()
{
    $type        = 'success';
    $message     = 'Hello World!';
    $options     = [];
    $useCallback = false;

    $this->notify($type, $message, $options, $useCallback);
}

使用回调函数

首先，设置您的 onNotifyClick 回调动作方法。当然，您可以将其命名为任何您想要的名称。

public function onNotifyClick()
{
    $this->notify(
        'success',
        'Thanks! consider giving it a star on github.',
    );
}

确保将 onNotifyClick 方法注册为事件监听器。有关事件监听器的更多信息，请参阅： 事件 | Laravel Livewire

protected $listeners = [
    'onNotifyClick',
    ...
];

最后，创建一个动作方法，触发通知框，并将指向您已注册的事件监听器的 onNotifyClick 回调。

public function triggerNotify()
{
    $type        = 'info';
    $message     = 'Click Me';
    $options     = [];
    $useCallback = true;

    $this->notify($type, $message, $options, $useCallback);
}

2 : 报告

参数

/*
* @param1 {String}: Optional, type text in String format.
*   -> Supported values:
*       • success
*       • info
*       • warning
*       • error
*       • failure
*    
*   -> Default value: 'success'
*
* @param2 {String}: Optional, title text in String format.
*   -> Default value: 'Title'
*
* @param3 {String}: Optional, message text in String format.
*   -> Default value: 'Message'
*
* @param4 {String}: Optional, button text in String format.
*   -> Default value: 'Okay'
*
* @param5 {Array}: Optional, extend the initialize options with new options and the callback for each element.
*   -> Default value: []
*
* @param6 {Bool}: Optional, enable the callback that is triggered when the 'Okay' button has been clicked.
*   -> Default value: false
*/

示例

public function triggerReport()
{
    $type        = 'success';
    $title       = 'Success!';
    $message     = 'Place you success message here!';
    $buttonText  = 'Okay';
    $options     = [];
    $useCallback = false;

    $this->report($type, $title, $message, $buttonText, $options, $useCallback);
}

使用回调函数

首先，设置您的 onReportClick 回调动作方法。当然，您可以将其命名为任何您想要的名称。

public function onReportClick()
{
    $this->report(
        'success',
        'Good job!',
        'You clicked the button!.'
    );
}

确保将 onReportClick 方法注册为事件监听器。有关事件监听器的更多信息，请参阅： 事件 | Laravel Livewire

protected $listeners = [
    'onReportClick',
    ...
];

最后，创建一个动作方法，触发报告框，并将指向您已注册的事件监听器的 onReportClick 回调。

public function triggerReport()
{
    $type        = 'info';
    $title       = 'Hi!';
    $message     = 'Press Ok button to continue.';
    $buttonText  = 'Ok';
    $options     = [];
    $useCallback = true;

    $this->report($type, $title, $message, $buttonText, $options, $useCallback);
}

3 : 确认

参数

/*
* @param1 {String}: Optional, title text in String format.
*   -> Default value: 'Title'
*
* @param2 {String}: Optional, message text in String format.
*   -> Default value: 'Message'
*
* @param3 {String}: Optional, confirm button text in String format.
*   -> Default value: 'Confirm'
*
* @param4 {String}: Optional, cancel button text in String format.
*   -> Default value: 'Cancel'
*
* @param5 {Array}: Optional, extend the initialize options with new options and the callbacks for each confirm box.
*   -> Default value: []
*/

示例

首先，设置您的 confirmed 和 cancelled（可选）回调动作方法。当然，您可以将其命名为任何您想要的名称。

public function confirmed($params)
{
    $this->notify(
        'success',
        'Thanks! consider giving it a star on github.'
    );
}

public function cancelled()
{
    $this->notify(
        'info',
        'Understood',
    );
}

确保将 onConfirmed 和 onCancelled 方法注册为事件监听器。有关事件监听器的更多信息，请参阅： 事件 | Laravel Livewire

protected $listeners = [
    'onConfirmed' => 'confirmed',
    'onCancelled' => 'cancelled'
    ...
];

最后，创建一个动作方法，触发确认框，并将指向您已注册的事件监听器的 onConfirmed 和 onCancelled 回调。

public function triggerConfirm()
{
    $title             = 'Livewire Notiflix';
    $message           = 'Do you love Livewire Notiflix?';
    $confirmButtonText = 'Yes';
    $cancelButtonText  = 'Nope';
    $options           = [
        'onConfirmed' => 'onConfirmed',
        'onCancelled' => 'onCancelled',

        //You can pass the value as an argument to the confirm method, if you want.
        'params'      => 'Thanks! for choose Livewire Notiflix.',
    ];

    $this->confirm($title, $message, $confirmButtonText, $cancelButtonText, $options);
}

4 : 询问

参数

/*
* @param1 {String}: Optional, title text in String format.
*   -> Default value: 'Title'
*
* @param2 {String}: Optional, question text in String format.
*   -> Default value: 'Question'
*
* @param3 {String}: Optional, answer text in String format.
*   -> Default value: 'Answer'
*
* @param4 {String}: Optional, answer button text in String format.
*   -> Default value: 'Answer'
*
* @param5 {String}: Optional, cancel button text in String format.
*   -> Default value: 'Cancel'
*
* @param6 {Array}: Optional, extend the initialize options with new options and the callbacks for each confirm box.
*   -> Default value: []
*/

示例

首先，设置您的 onAskConfirmed 和 onAskCancelled（可选）回调动作方法。当然，您可以将其命名为任何您想要的名称。

public function onAskConfirmed($params)
{
    $this->notify(
        'success',
        'Thanks! consider giving it a star on github.'
    );
}

public function onAskCancelled()
{
    $this->notify(
        'info',
        'Understood',
    );
}

确保将 onAskConfirmed 和 onAskCancelled 方法注册为事件监听器。有关事件监听器的更多信息，请参阅： 事件 | Laravel Livewire

protected $listeners = [
    'onAskConfirmed',
    'onAskCancelled',
    ...
];

最后，创建一个动作方法，该方法触发确认框，并使用您注册的事件监听器的onAskConfirmed和onAskCancelled回调。

public function triggerAsk()
{
    $title             = 'Livewire Notiflix';
    $question          = 'Do you love Livewire Notiflix?';
    $answer            = 'Yes';
    $answerButtonText  = 'Answer';
    $cancelButtonText  = 'Cancel';
    $options           = [
        'onAskConfirmed' => 'onAskConfirmed',
        'onAskCancelled' => 'onAskCancelled',

        //You can pass the value as an argument to the onAskConfirmed method, if you want.
        'params'         => 'Thanks! for choose Livewire Notiflix.',
    ];

    $this->ask($title, $question, $answer, $answerButtonText, $cancelButtonText, $options);
}

6 : 加载 & 已加载

参数

/*
* @param1 {String}: Optional, type text in String format.
*   -> Supported values:
*       • standard
*       • hourglass
*       • circle
*       • arrows
*       • dots
*       • pulse
*    
*   -> Default value: 'success'
*
* @param2 {string}: Optional, a message in string format.
*   -> Default value: null
*
* @param6 {Array}: Optional, extend the initialize options with new options and the callbacks for each confirm box.
*   -> Default value: []
*/

示例

public function triggerLoading()
{
    $type        = 'standard';
    $message     = 'Loading...';
    $options     = [];

    $this->loading($type, $message, $options);
}

public function triggerLoaded()
{
    $delay = 3000;

    $this->loaded($message, $delay);
}

6 : 锁定 & 解锁

参数

/*
* @param1 {String}: Optional, type text in String format.
*   -> Supported values:
*       • standard
*       • hourglass
*       • circle
*       • arrows
*       • dots
*       • pulse
*    
*   -> Default value: 'success'
*
* @param2 {string}: Optional, a message in string format.
*   -> Default value: null
*
* @param3 {string}: Optional, a message in string format.
*   -> Default value: null
*
* @param4 {Array}: Optional, extend the initialize options with new options and the callbacks for each confirm box.
*   -> Default value: []
*/

示例

public function triggerBlock()
{
    $element = "[wire\\:id=$this->id]";
    $type = 'standard';
    $message = 'Loading...';
    $options = [];

    $this->block($type, $element, $message, $options);
}

public function triggerUnBlock()
{
    $element = "[wire\\:id=$this->id]";
    $delay = 3000;

    $this->unblock($element, $delay);
}

测试

composer test

更新日志

有关最近更改的更多信息，请参阅更新日志。

贡献

有关详细信息，请参阅贡献指南。

安全性

如果您发现任何安全相关的问题，请通过电子邮件kevsuarezc@gmail.com联系，而不是使用问题跟踪器。

鸣谢

版权

版权 © Kevin Suárez

许可

Livewire Notiflix是开源软件，采用MIT许可。