README

此包允许您通过Laravel Livewire组件动态显示Bootstrap提示框。

文档

• 要求
• 安装
• 用法
  • 显示提示框
  • 触发事件
• 发布资源
  • 自定义配置
  • 自定义视图

要求

• Bootstrap 5必须先通过webpack安装

安装

需要此包

composer require bastinald/laravel-livewire-toasts

将livewire:toasts组件添加到您的应用程序布局视图中

<livewire:toasts/>
<livewire:scripts/>
<script src="{{ asset('js/app.js') }}"></script>

在您的应用程序JavaScript文件中需要../../vendor/bastinald/laravel-livewire-toasts/resources/js/toasts

require('@popperjs/core');
require('bootstrap');
require('../../vendor/bastinald/laravel-livewire-toasts/resources/js/toasts');

用法

显示提示框

通过触发带有颜色和消息的showToast事件来显示提示框

public function save()
{
    $this->validate();

    $this->user->update([
        'name' => $this->name,
        'email' => $this->email,
    ]);

    $this->emit('showToast', 'success', __('User updated!'));
}

颜色应该是Bootstrap颜色名称，例如success、danger、info。

触发事件

您可以在视图中触发事件

<button type="button" wire:click="$emit('showToast', 'danger', 'Closing!')">
    {{ __('Close') }}
</button>

或在内组件中，就像任何正常的Livewire事件一样

public function save()
{
    $this->validate();

    // save the record

    $this->emit('showToast', 'info', __('Record saved!'));
}

发布资源

自定义配置

通过发布配置文件来自定义提示框配置

php artisan vendor:publish --tag=laravel-livewire-toasts:config

现在您可以轻松更改诸如隐藏延迟和错误消息之类的设置。

自定义视图

通过发布视图文件使用您自己的提示框视图

php artisan vendor:publish --tag=laravel-livewire-toasts:views

现在编辑位于resources/views/vendor/laravel-livewire-toasts内的视图文件。包将使用此视图来渲染组件。