在前端开发中，我们常常需要使用弹窗来给用户提示消息。而使用 snotify 这个 npm 包，可以轻松地实现各种类型的通知弹窗，包括成功操作提示、错误消息、警告以及一般信息提示等。
安装
在使用之前，我们需要先通过 npm 包管理器来安装 snotify 包及其相关的依赖。
npm install snotify --save
使用
在安装完成后，在 JavaScript 文件中，使用以下代码引入 snotify 库：
import Snotify from 'snotify';
现在我们可以使用 snotify 各种提供的 API 来创建弹窗了。
基本用法
-- -------------------- ---- ------- -- ------ ----------------------- - -------- ----- -- ----------- ---------------- ----- -- ------- ------------- ----- -- ------------- ------------- ----- -- ---------- --------- ----------- -- ------- --------- --- -- --------- ----- --------- --- --- -- ------- ------------------------ -- ------- ----------------------- ---------- ------------
这些方法除了展示提示信息外，还可以接受一个配置对象。而配置对象中包含了要使用的属性选项。下面是一些可用的选项：
- timeout：延迟自动关闭的时间，默认值为 3000。
- showProgressBar：是否显示进度条，默认值为 true。
- closeOnClick：是否可以通过点击消息进行关闭，默认值为 true。
- pauseOnHover：悬停时是否暂停计时器，默认值为 true。
- position：消息显示的位置。默认值为
rightTop。 - backdrop：是否显示背景。默认值为 -1。
触发器
在实际开发中，我们常常需要在特定的时候触发一个通知。而 snotify 提供了三种类型的触发器，包括 Promise、Callback 和 Observable。
Promise 触发器
Snotify.async('操作中', new Promise((resolve, reject) => {
// 异步操作，处理完毕后调用 resolve 或 reject
setTimeout(() => {
resolve(Snotify.success('操作成功'));
}, 2000);
}), {
showProgressBar: false
});Callback 触发器
Snotify.async('操作中', (done) => {
// 异步操作，处理完毕后调用 done 方法
setTimeout(() => {
done(Snotify.success('操作成功'));
}, 2000);
}, {
showProgressBar: false
});Observable 触发器
const handler = Snotify.async('操作中', rxjs.timer(2000).pipe(
mapTo(Snotify.success('操作成功'))
), {
showProgressBar: false
});
// 取消操作
handler.unsubscribe();复杂消息
我们可以使用 Snotify 的静态方法 create 来自定义消息，并添加各种组件，如图标、按钮、输入框等。
-- -------------------- ---- -------
----- -------- - ----------------
------ -------
----- -------------------------------
------- -
------------- ------
--------- ------------
----- ------------------------- -- -----
----- ---------------------- -- ----- ----
------- -
---- --------- ------------ ------ ----- --------
---- --------- ------------ ----- ----- -----------
-
-
-- ----------
---
-- --------
-------------------- ------- ------ -- -
-- ------
---
-- ------
--------------------- ------- ------ -- -
-- --------
---结语
以上便是 snotify 的使用教程。借助这个强大的第三方库，我们可以在开发中使用各种各样且高度可定制的通知弹窗，让用户在操作时获得更好的反馈体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591581e8991b448d685b