介绍
msg-notify 是一款使用简单、轻量级的 npm 包，它可以帮助我们在前端项目中快速地添加消息通知功能，让用户可以及时地了解到系统的实时动态。
安装
在使用 msg-notify 前，我们首先需要安装它。我们可以通过 npm 在命令行中进行安装：
npm install msg-notify
使用教程
第一步：引入
安装完成后，我们就可以在代码中引入它：
import MsgNotify from "msg-notify";
或者使用 commonjs 的 require 引入：
const MsgNotify = require("msg-notify");第二步：创建 MsgNotify 实例
const msgNotify = new MsgNotify();
第三步：添加消息
msgNotify.add({
title: "你有一条新消息",
content: "欢迎使用 msg-notify",
duration: 3000,
theme: "success",
icon: "fa fa-envelope"
});第四步：自定义配置
msg-notify 提供了多种配置选项：
| 配置项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | string | "消息通知" | 消息框的标题 |
| content | string | 消息框内容 | |
| duration | number | 3000 | 显示时间 |
| theme | string | "info" | 消息框主题，可选值："info"、"success"、"warning"、"error" |
| icon | string | 消息框图标，可选值：字体图标 class 名称，比如："fa fa-envelope" | |
| onClick | function | 消息框被点击时触发的回调函数 |
我们可以在创建 MsgNotify 实例时传入自定义的配置，这些配置会应用到所有通过 msgNotify.add() 添加的消息中。
const msgNotify = new MsgNotify({
duration: 5000, // 显示时间为 5s
theme: "success", // 主题为 success
icon: "fa fa-check-circle" // 图标为“成功”图标
});我们同时也可以在 add() 方法中对每个消息进行单独的配置：
-- -------------------- ---- -------
---------------
------ ----------
-------- ----- ------------
--------- -----
------ ----------
----- --- -------------
-------- -- -- -
-- -----------
-
---示例代码
-- -------------------- ---- -------
------ --------- ---- -------------
-- -- --------- --
----- --------- - --- -----------
--------- -----
------ ----------
----- --- ----------------
---
-- ----
---------------
------ ----------
-------- ----- ------------
-------- -- -- -
----------------------
-
---总结
使用 msg-notify 可以轻松地实现消息通知功能，它具有简单易用、可自定义配置等优点，可以帮助我们提高开发效率和用户体验。在实际开发中，我们也可以结合其它组件库和框架，从而进一步提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557a281e8991b448d4a4d