snackbar弹窗的调用

丨浅笑安然丨2022-05-262024-04-30

近期因为某些原因，也许是因为刚接触JS比较好奇JS的用法，也许是因为看到其它大佬网站的弹窗心动了，于是我开始研究起了弹窗，但我是一个喜欢简单的人，面对各位大佬的顶级教程，我还是比较喜欢butterfly自带的，不为别的，只是因为它“简单”。

经过研究发现butterfly使用的是Snackbar弹窗，但是两者的调用方法又有所区别，一时也没搞懂butterfly的怎么调用，但是可以确定的是butterfly的弹窗只是在Snackbar的基础上修改了一下，于是经过多次失败还是不甘心，突发奇想，我可以直接调用原生的弹窗，然后用css改的和butterfly的一模一样就行了，于是就有了这篇文章。

文档

官方文档：https://www.polonel.com/snackbar/

以下内容仅供参考，具体请查阅官方文档。

弹窗位置

可选：top-left / top-center / top-right / bottom-left / bottom-center / bottom-right

翻译：左上/中上/右上/左下/中下/右下

1	Snackbar.show({pos: 'bottom-left'});

配置

Key	Default	描述
text	null	要在通知中拆分的文本。
textColor	#FFFFFF	通知文本的文本颜色。默认值为白色。
pos	bottom-left	通知将显示的位置。有关可能的位置，请参阅上面的示例。
customClass	null	将自定义类添加到通知中以进行自定义样式设置。
width	auto	通知的宽度。用于根据需要缩小/扩展窗口。
showAction	true	布尔值来显示操作 buton 或不显示。
actionText	Dismiss	要显示为操作按钮的文本。
actionTextAria	Dismiss, Description for Screen Readers	屏幕阅读器的文本。
alertScreenReader	false	确定屏幕阅读器是否会宣布弹窗消息。
actionTextColor	#4CAF50	操作按钮的文本颜色。
backgroundColor	#323232	通知窗口的背景色。
duration	5000	显示通知的时间（以毫秒为单位）。
onActionClick	function(ele)	默认操作关闭通知。
onClose	function(ele)	在通知已关闭时触发。

调用

主题弹窗的调用：

btf.snackbarShow('欢迎来到丨浅笑安然丨的小站！') 
或
if (GLOBAL_CONFIG.Snackbar) {
    btf.snackbarShow('ServiceWorker未激活')
}

snackbar的调用

无操作：
1
Snackbar.show({ showAction: false, });

操作文本

1	Snackbar.show({ actionText: 'Thanks!', });

文本颜色

1	Snackbar.show({ actionTextColor: '#ff0000', });

单击“回调”

Snackbar.show({
   text: 'I have a custom callback when action button is clicked.',
   width: '475px',
   onActionClick: function(element) {
       //Set opacity of element to 0 to close Snackbar
       $(element).css('opacity', 0);
       alert('Clicked Called!');
   }
});

调用示例

1	Snackbar.show({ actionText: '关闭',text: '欢迎来到丨浅笑安然丨的小站！',backgroundColor: '#9c9',actionTextColor: '#ffffff',pos: 'bottom-center',duration: '5000' });

魔改

为了确保snackbar跟主题的一模一样，需要在自定义css里面写入以下内容：

关于颜色，如果比较随便的话可以忽略掉，调用的时候可以单独配置颜色，我只是想一模一样才写的。

/* 颜色设置 */
[data-theme=light] {
  --sianx_popup: #9c9;/* 白天 */
}
[data-theme=dark] {
  --sianx_popup: #343434;/* 夜间 */
}
.snackbar-pos {
border-radius: 5px !important;/* 弹窗圆角 */
}
.snackbar-container {
  background: var(--sianx_popup) !important;/* 弹窗颜色 */
}
/* 字体设置，没有自定义字体的可忽略，这边只是提醒一下 */
.snackbar-container {
  font-family: 'aqqxs', sans-serif !important; /* snackbar弹窗 */
}

实践

看到这里应该已经知道大概怎么调用了，那么我们开始实践操作一下。

这是我的一个主页欢迎的弹窗，写进JS文件里就可以在指定的链接弹出弹窗。

1
2
3

if(window.location.href == 'http://localhost:4000/'||window.location.href == 'https://siax.cn/'||window.location.href == 'https://www.siax.cn/'||window.location.href == 'https://blog.siax.cn/'){
    Snackbar.show({ actionText: '关闭',text: '欢迎来到丨浅笑安然丨的小站！',backgroundColor: '#9c9',actionTextColor: '#ffffff',pos: 'bottom-center',duration: '5000' });
  }