Laravel 的 toastr.js 通知 - Javascript

在 Laravel 中使用 toastr.js 通知是一种方便，靠谱和美观的方式，不仅仅能够通过后端控制发送通知消息，还可以定制消息样式与位置。本文将介绍如何在 Laravel 应用程序中，使用 toastr.js 插件来实现客户端通知消息。

安装 toastr.js 插件

首先，需要通过 npm 安装 toastr.js。

npm install toastr --save

安装完成后，在 resources/js/app.js 文件中添加以下代码

window.toastr = require('toastr');

在完成编译前，运行以下命令。

npm run dev

使用 toastr.js 实现通知

在 Laravel 中，可以使用 jQuery 和 toastr.js 插件来实现弹出消息通知。当需要发送通知时，在 Controller 中添加以下代码：

public function store(Request $request)
{
    // 你的逻辑代码

    return response()->json(['success' => 'Song has been added']);
}

在 Blade 模板文件中，添加以下代码：

<script>
    $(document).ready(function() {
        @if(session('success'))
            toastr.success('{{ session('success') }}')
        @endif
        @if(session('error'))
            toastr.error('{{ session('error') }}')
        @endif
    });
</script>

注意：应该在这行代码的前面包含 stripe，以选择合适的样式。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

这段代码的含义是，当页面加载后，判断是否有成功或错误消息存储在 session 中，如果有则使用 toastr.js 弹出消息。

自定义通知样式与位置

要使用自定义消息样式与位置，需要在 resources/js/app.js 文件中添加以下代码：

toastr.options = {
    "positionClass": "toast-top-right",
    "progressBar": true,
    "timeOut": "5000",
}

这个例子使用了一个位置类名，将通知垂直方向放置在窗口的右上角，添加了一个可选的进度条，并指定了通知消息的持续时间为5秒。

总结

至此，我们已经学习了如何在 Laravel 应用程序中，使用 toastr.js 插件添加客户端通知消息，同时也介绍了自定义的样式与位置。希望您在使用 toastr.js 插件时，能够更好地提升用户体验，增加用户对您的应用程序的好感度。