在前端开发中，经常需要给用户反馈信息，例如成功或失败的提示、警告等。而 toastr.js 是一个非常好用的通知消息库，可以生成漂亮、交互性高的提示框。本文将介绍如何使用 npm 包 toastr.js 来实现这个需求。
安装与引入
在命令行中进入项目目录，输入以下命令安装 toastr.js：
--- ------- ------
安装完成后，在需要使用 toastr.js 的页面中引入该库：
------ ------ ---- --------- ------ --------------------------
基本使用
toastr.js 提供了多种类型的通知框，包括成功、警告、错误和信息四种。我们可以通过调用相应的函数来生成不同类型的通知框。例如，要生成一个简单的成功消息框，可以这样写：
------------------------
除了 success 函数，还有 warning、error 和 info 函数，分别对应不同类型的通知框。这些函数的第一个参数是消息内容，第二个参数可选，表示标题。例如，要生成一个带标题的错误通知框，可以这样写：
--------------------- ------
高级使用
除了基本用法外，toastr.js 还提供了一些高级特性，如自定义位置、关闭按钮、超时时间等。我们可以在调用 toastr 函数时，传入一个选项对象来设置这些特性。例如，要生成一个自定义位置的警告消息框，可以这样写：
------------------------ ----- - -------------- ----------------- ---
除了 positionClass 属性以外，还可以设置 closeButton 和 timeOut 属性，分别表示是否显示关闭按钮和超时时间。例如，要生成一个不会自动关闭的错误通知框，并且带有关闭按钮，可以这样写：
--------------------- ----- - ------------ ----- -------- - ---
示例代码
下面是一个完整的示例代码，它演示了如何使用 toastr.js 来生成不同类型的通知框，并且设置了一些高级特性：
------ ------ ---- --------- ------ -------------------------- -- -------- -------------- - - ------------ ----- -------------- ------------------- -------- ---- -- -- ---------- ------------------------ ------------------------ ------ --------------------- ------ -------------------------- ------
总结
本文介绍了如何使用 npm 包 toastr.js 来实现前端通知消息的需求。通过学习本文，读者可以掌握 toastr.js 的基本用法和高级特性，并且了解如何在项目中使用该库。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32621