在前端开发中，我们不仅需要掌握各种前端技术，更需要掌握如何使用自己或者别人开发的工具库。而在这些工具库中，前端框架和 UI 库是我们使用最多的，它们能够帮助我们快速开发我们需要的功能，提高开发效率，节省时间。aurelia-toastr 就是一款优秀的 NPM 包，它可以帮助我们轻松地在 Aurelia 框架中使用 Toastr，本文将着重介绍如何使用 aurelia-toastr。
什么是 toastr？
首先，我们需要了解 Toastr 是什么。Toastr 是一个轻量级的、通知式的 JavaScript 弹出消息框框架，它可以用于显示成功、错误、警告等消息。该框架支持多种显示和隐藏效果，可以自定义多种参数（如位置、显示时长、显示样式等），非常易于使用。但是在 Aurelia 框架中，我们不能直接使用 Toastr，这就是我们需要使用 aurelia-toastr 的原因。
如何使用 aurelia-toastr？
在本教程中，我们将介绍如何使用 aurelia-toastr，以帮助你在 Aurelia 框架中轻松使用 Toastr。
步骤 1：安装 aurelia-toastr
首先，我们需要安装 aurelia-toastr。您可以使用 npm 包管理器来安装它。
npm install aurelia-toastr toastr --save
在这个命令中，我们不仅会安装 aurelia-toastr，还会安装 Toastr 包，这是 aurelia-toastr 的核心依赖。
步骤 2：配置 aurelia-toastr
现在，我们需要在我们的 Aurelia 应用程序中配置 aurelia-toastr。这可以通过在 aurelia.json 中添加以下配置选项完成：
{
"name": "aurelia-toastr",
"path": "../node_modules/aurelia-toastr/dist/amd",
"main": "aurelia-toastr",
"resources": ["toastr.css"]
}在这个配置选项中，我们指定了 NPM 包的名称，路径、主文件以及资源文件。所有这些选项都是必须的，以支持 aurelia-toastr 的顺利工作。
现在，我们需要在我们的应用程序中注册 aurelia-toastr。可以在 app.js 或者 main.js 中添加以下代码：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
------ -------- ------------------ -
-----------
------------------------
---------------------
------------------------- ------ -- -
-------------- - -
------------ -----
------------ -----
-------------- ------------------
-------- ----
-
---
----------------------- -- -------------------
-在以上代码中，我们使用 Aurelia 的 plugin 方法注册 aurelia-toastr。我们将 config 参数传递给该方法，并在其中指定了一些配置选项，以满足我们的需求。
步骤 3：使用 aurelia-toastr
现在，我们已经成功地安装和配置了 aurelia-toastr，我们可以开始使用它来显示 Toastr 消息了。
-- -------------------- ---- -------
------ -------- ---- --------------------
------ - ------------- - ---- -----------------
----------------------
------ ----- ---------- -
------------------- -
----------- - -------
-
------------- -
---------------------------- ----------
-
----------- -
------------------------ ----------
-
------------- -
---------------------------- ----------
-
---------- -
---------------------- ----------
-
-在以上代码中，我们引入了 ToastrService，并在构造函数中注入了它。接着我们定义了四个方法，展示 Toaster 的四种状态：成功、错误、警告和信息。使用这些方法可以在任何地方随时显示 Toastr 消息。
步骤 4：设置 Toastr 风格
如果您想自定义每个 Toastr 的样式和位置，可以使用以下代码：
this.toastr.success('My Message', 'My Title', {
positionClass: 'toast-bottom-left',
closeButton: true,
newestOnTop: true,
maxOpened: 0
});在以上代码中，我们可以自定义 Toastr 的样式、标题、位置等。
结论
在本文中，我们详细介绍了使用 aurelia-toastr 所需的步骤和方法。aurelia-toastr 是一个非常实用的 NPM 包，可以轻松帮助您在 Aurelia 应用程序中显示 Toastr 消息，提高了开发效率，减少了开发时间。如果您是 Aurelia 开发人员，那么 aurelia-toastr 绝对是您的必备工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551d681e8991b448cf3ed
