在这篇文章中，我们将会介绍一种自定义的通知信息库，npm 包 toastr。我们将会详细的介绍如何在前端中使用 toastr，包括如何安装和如何集成到你的项目中。
安装
在使用 npm 包 toastr 之前，你必须要先安装它。你可以使用以下命令来安装：
npm install toastr --save
集成
安装完 toastr 后，你就可以在你的项目中使用它了。你需要在你的 HTML 文件中导入 toastr 的 CSS 和 JavaScript 文件。
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
使用
到目前为止，你已经成功的在你的项目中集成了 toastr。下面开始就是如何使用它的部分。我们将会演示一些最基本的使用方法。
基本用法
在调用 toastr 的时候，通常需要指定以下几个参数：
type: 指定要显示的通知类型，如 "success"、 "warning"、 "error"、 "info"；message: 要显示的消息内容；title: 指定通知消息的标题。
以下是一个使用 toastr 显示消息的例子：
toastr.success('Hello World!', 'Welcome');这会显示一个带有消息 "Hello World!" 和标题 "Welcome" 的通知消息。
自定义选项
除了基本用法的参数之外，toastr 还有很多其他选项可以自定义。你可以使用 toastr.options 对象来指定这些选项。
-- -------------------- ---- -------
-------------- - -
------------ -----
------ ------
------------ -----
------------ -----
-------------- -------------------
------------------ ------
------------- ----
------------- -----
-------- -----
---------------- -----
----------- --------
----------- ---------
----------- ---------
----------- ---------
--在上面的代码中，我们指定了一些选项，如关闭按钮、debug 模式、进度条、位置等等。你可以指定自己需要的选项。
链式调用
toastr 还支持链式调用的方式。这种方式可以帮助你更加容易的组合多个选项。
以下是一个链式调用的例子：
toastr.options.timeOut = 2000;
toastr.options.progressBar = true;
toastr.success('Hello World!')
.info('Hello World!', 'Title')
.error('Hello World!', 'Title', {timeOut: 5000});这会在 2 秒后显示一个带有进度条的成功消息。接着是一个带有标题的信息消息。最后是一个带有错误类型和修改的 timeOut 时间的错误消息。
总结
到这里，我们已经介绍了如何安装、集成和使用 toastr 了。可以看出，toastr 是一个非常方便的和简单易用的通知库，它可以帮助你在前端快速地添加通知消息功能。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57709