简介
aurelia-notifications 是一个基于 aurelia 框架的用于创建通知的 npm 包。该包使用 Bootstrap 来创建通知并且支持多种通知类型。在本教程中，我们将介绍如何使用 aurelia-notifications 创建通知。
安装
使用 npm 命令安装 aurelia-notifications：
npm install aurelia-notifications --save
安装成功后，在你的 Aurelia 项目中添加 aurelia-notifications。打开 aurelia.json 文件，将 aurelia-notifications 添加到 bundle 数组中：
-- -------------------- ---- -------
---------- -
-
------- ----------------
--------- -
------------
-----------------
--
--------------- -
-----------------------
-----------------------
---
----------------------- -- ----
-
-
--消息通知
样式
aurelia-notifications 的消息通知使用了 Bootstrap 的样式。因此，你需要在你的项目中添加 Bootstrap 样式文件。你可以从 Bootstrap 官网下载样式文件，或使用相关的 CDN 来引入。
添加视图
你需要在你的视图（View）中添加以下代码，以创建通知的容器：
<template> ... <auk-notifications></auk-notifications> ... </template>
创建通知
你可以使用以下代码来创建一个新的可关闭的警告框：
-- -------------------- ---- -------
------ --------------------- ---- ------------------------
----- ----------- -
------ ------ - ----------------------
-------------------------------- -
------------------------ - --------------------
-
----------- -
--------------------------------------
----- ----------
-------- ----- -- - ------- ----------
------ ----
---
-
-在上述代码中，我们使用了 NotificationService 的 showMessage 方法。该方法接受一个选项对象进行配置，其中包括：
type- 通知的类型。可选值为'info'、'success'、'warning'或'danger'。message- 要显示的消息文本。close- 是否显示关闭按钮。如果设置为true，将在通知框中显示一个关闭按钮。
移除通知
要移除通知，你可以在你的视图中使用以下代码：
<auk-notifications></auk-notifications>
该代码将显示当前打开的全部通知。当用户关闭通知框时，该通知将从 DOM 中移除。
完整示例
下面是一个使用 aurelia-notifications 的完整示例：
-- -------------------- ---- -------
------ --------------------- ---- ------------------------
----- ----------- -
------ ------ - ----------------------
-------------------------------- -
------------------------ - --------------------
-
----------- -
--------------------------------------
----- ----------
-------- ----- -- - ------- ----------
------ ----
---
-
------------- -
--------------------------------------
----- ----------
-------- ----- -- - ------- ----------
------ ----
---
-
-<template> <auk-notifications></auk-notifications> <button click.delegate="showAlert()">Show Alert</button> <button click.delegate="showSuccess()">Show Success</button> </template>
结论
aurelia-notifications 是一个用于创建通知的方便易用的 npm 包。通过使用本文中提到的代码和示例，你可以轻松地在你的 aurelia 项目中集成它，为用户提供更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607a81e8991b448dea85