显示 toastr 警告 - Javascript

当我们需要在网站中向用户展示一些提示信息或警告信息时，toastr 是一个非常方便易用的工具。它可以实现各种类型的提示和警告效果，比如土司模式、警告弹窗、进度条等等。本文将介绍如何在 Javascript 中使用 toastr 显示警告信息。

安装 toastr

首先，我们需要安装 toastr 。我们可以使用 npm 进行安装：

npm install toastr

或者从 CDN 加载 toastr.js 文件：

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

显示警告

下面的代码展示了如何使用 toastr 显示一个简单的警告信息：

toastr.warning('This is a warning message');

我们可以在 toastr 函数中传入一些参数，来调整警告框的显示效果和行为，比如：

• positionClass: 定义警告框的位置。
• timeOut: 设置警告框的显示时间。
• closeButton: 可以关闭警告框。
• progressBar: 显示一个进度条，表示警告框的显示时间。
• preventDuplicates: 防止重复显示警告框。

下面的代码展示了如何使用一些参数来自定义警告框：

toastr.warning('This is a warning message', 'Warning', {
  closeButton: true,
  progressBar: true,
  timeOut: 5000,
  positionClass: 'toast-bottom-right',
  preventDuplicates: true
});

更多提示样式

除了警告消息之外，toastr 还提供了其他几种提示消息的样式，如：

• success
• error
• info

我们可以通过调用相应的函数来显示相应的消息：

toastr.success('This is a success message');
toastr.error('This is an error message');
toastr.info('This is an info message');

和警告框一样，我们也可以在这些函数中传入参数来自定义提示框的行为和显示效果。

结论

使用 toastr ，我们可以轻松地在网站中显示各种类型的提示和警告信息，使用户操作更加友好和可靠。通过本文的介绍，你应该可以开始使用 toastr 了。