介绍
ng-notifier 是一个 AngularJS 模块，用于在应用程序中显示通知消息。它支持两种样式的通知，一种是常规通知，另一种是进度通知。ng-notifier 可以被视为一个基于 Toastr 的简化版本，它过滤了 Toastr 的高级功能，更简单地实现了类似的功能。
特性
- 显示不同类型的通知消息，包括成功、警告、错误和信息。
- 支持自定义消息标题和内容。
- 支持自定义通知样式，包括位置、类型和图标。
- 支持进度通知。
安装
可以通过 npm 安装 ng-notifier：
--- ------- ----------- ------
或者，你可以从 GitHub 上获取源代码并手动引入它。
快速上手
在 HTML 中引入 ng-notifier：
----- ---------------- ----------------------------------- ------- ------------------------------------------
确保你已经在你的 AngularJS 应用程序中包含了 ng-notifier：
----------------------- ------------
在控制器中使用通知：
-------------------------------------------------- -------------------- ------- --------- -
------------------------------ - ---------- -
--------------------------- ----- --------- --- --------- ----------------
--
---通知类型
ng-notifier 支持四种类型的通知：
- 成功（success）: 显示成功消息，绿色背景。
- 警告（warning）: 显示警告消息，黄色背景。
- 错误（error）: 显示错误消息，红色背景。
- 信息（info）: 显示信息消息，蓝色背景。
自定义样式
你可以通过以下可选参数来自定义通知消息的样式：
- position: 消息出现的位置。默认在屏幕右上角，可选值有 topLeft、topRight、bottomLeft 和 bottomRight。
- timeout: 自动关闭通知的时间（以毫秒为单位）。默认为 3000 毫秒，也可以设置成 0 来禁用自动关闭。
- type: 消息类型。默认是 info，也支持 success、warning 和 error。
- icon: 消息图标。默认是一个细长的 exclamation 样式的图标（黄色色调）。
以下是自定义样式示例：
--------------------------- ----- --------- --- --------- --------------- - --------- -------------- -------- ----- ----- ---------- ----- ----------------- ---
进度通知
ng-notifier 还支持进度通知，可以像一般的通知一样使用。进度通知是一个长期存在的通知，可以在通知的消息内容中包含进度条。
使用进度通知的示例：
------------------------------- ----- --------- -- -- ------------- - --------- ----------- -------- -- -- ------- ---- ----- ------------ ---- ---
如果需要更新进度条，只需调用 updateProgress() 方法：
----------------------------------------------
结论
ng-notifier 提供了 AngularJS 应用程序中简单易用的通知消息功能。它支持各种类型的消息，可以自定义消息样式，还支持进度通知。如果你正在构建一个 AngularJS 应用程序，可以考虑使用 ng-notifier 来显示通知消息。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005579581e8991b448d494f