显示 toastr 信息 - Javascript

Toastr 是一个简单易用的轻量级 JavaScript 库，用于创建各种不同类型的通知信息（消息框），包括警告、错误、成功和信息等等。它非常适合添加到 Web 应用程序中，以向用户显示实时通知。

安装 toastr

Toastr 的安装非常简单。它支持 CDN，你可以使用以下链接将其添加到你的网站：

<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>

你也可以使用 npm package 安装：

npm install toastr

安装后，你可以引入它并开始使用。

import toastr from 'toastr';

// 或者
const toastr = require('toastr');

使用 toastr

Toastr 极其易用。只需几行代码即可向用户显示通知。首先，你需要调用 toastr.options 来自定义选项。你可以配置通知的类型、位置、持续时间和其他选项。

以下是一个简单的示例，向用户显示一个成功的消息：

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

// 成功消息
toastr.success("Great Job! You've successfully created an account.");

如果你需要显示错误信息，可以使用 toastr.error()。 同样，如果你想显示信息消息框，则可以使用 toastr.info()。

// 错误消息
toastr.error("Oops, something went wrong. Try again later.");

// 信息消息
toastr.info("Please Note: The password must be at least 8 characters long.");

toastr 选项

在调用 toastr.options() 方法之前，你需要先定义选项对象。以下是一个样例选项对象：

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": true,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

你可以根据需要定制上述选项。以下是一些选项的描述：

• closeButton - 如果设置为 true，则在通知框中添加关闭按钮。
• debug - 如果设置为 true，则在控制台上记录发生的错误。
• newestOnTop - 如果设置为 true，则新通知将显示在最上面。
• progressBar - 如果设置为 true，则在通知框中添加进度条。
• positionClass - 通知框出现的位置。你可以使用 toast-top-right、toast-top-left、toast-bottom-right、toast-bottom-left、toast-top-center、toast-bottom-center 以及 toast-center。
• preventDuplicates - 如果设置为 true，则防止显示重复的通知。
• onclick - 如果设置，当通知被点击时，将触发点击事件。
• showDuration - 以毫秒为单位的显示时间。
• hideDuration - 隐藏的以毫秒为单位的时间。
• timeOut - 隐藏通知的等待时间（毫秒）。
• extendedTimeOut - 时间延长等待（毫秒）。
• showEasing - 显示时的动画效果（swing 或 linear）。
• hideEasing - 隐藏时的动画效果（swing 或 linear）。
• showMethod - 显示通知的方法（fadeIn、slideDown 或者 show）。
• hideMethod - 隐藏通知的方法（fadeOut、slideUp 或者 hide）。

结论

Toastr 是一个简单、易用又优雅的通知插件。无论是 Web 应用程序还是网站，它都非常适合用来实时向用户显示通知。它的灵活性使其非常适合各种开发环境。赶紧使用 Toastr，让用户始终了解他们的反馈！