notyf-js 是一款轻量、简洁、易于使用的 JavaScript 库，用于在网页中弹出通知消息。相比于传统的 alert、confirm、prompt 等弹出框，notyf-js 有更好的用户体验，并且可以在不阻塞用户操作的情况下进行提示。
安装 notyf-js
notyf-js 可以通过 npm 安装：
npm install notyf
如果你想直接使用库文件，你可以从 GitHub 下载 notyf.js 或 notyf.min.js 并在你的 HTML 文件中引入它们：
<script src="/path/to/notyf.min.js"></script>
使用 notyf-js
notyf-js 的使用非常简单，只需在 JavaScript 中实例化一个 Notyf 类，并调用其 show 方法即可。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----------
----- ---------------- ------------------------------
-------
------
------- ------------------------
------- -------------------------------------
--------
----- ----- - --- --------
-------------------------------------------------------- -- -- -
-----------------------
---
---------
-------
-------如上代码所示，你需要先引入 notyf.min.css，以保证消息样式的显示。然后通过构造一个 Notyf 实例，并在按钮点击时调用 success 方法弹出成功提示。notyf-js 还有其他几种不同类型的提示方法，如 warning、error 和 info，分别对应不同的消息类型。
自定义 notyf-js 实例
notyf-js 支持自定义来适应不同的需求。
-- -------------------- ---- -------
----- ----- - --- -------
--------- ----- -- ----- - -
--------- -
-- --------
-- ------
--
------ --
----- -------
----------- -------
----- ------
---
---如上代码所示，你可以在实例化 Notyf 对象时传入一个配置对象，来自定义配置。该配置对象包含 duration、position 和 types。
- duration 表示消息持续的时间，默认为 2000 毫秒；
- position 表示消息弹出的位置，由 x 和 y 两个属性组成。x 的值可以是 left、center 和 right，y 的值可以是 top、center 和 bottom；
- types 表示不同类型的消息的配置，如 info、success、warning 和 error。
在 types 中，你可以定义不同类型消息的样式，在实际生产中会有不同的需求，你可以根据需要实现自己的弹框样式。
notyf.error('Hm, that was not supposed to happen.', {
background: 'pink',
icon: false,
className: 'error-notification',
});当调用 notyf.error 方法时，你也可以传入一个配置对象来给该消息单独配置样式，该方法默认会使用 type 为 error 的配置，但你也可以覆盖它，并给该消息单独指定样式。
结语
notyf-js 是一个非常实用、易用的弹框插件库，它可以提高用户体验，并且可以自定义不同类型的消息样式来适应不同的需求。那么，你是不是把 notyf-js 加入了你的项目中呢？
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2a81e8991b448d7cc3