如何检测 MDC Snackbar 是不是在 JS 中关闭？

Posted 2023-02-23

【中文标题】如何检测 MDC Snackbar 是不是在 JS 中关闭？

【英文标题】：How to detect if the MDC Snackbar has closed in JS?如何检测 MDC Snackbar 是否在 JS 中关闭？

【发布时间】：2019-06-10 11:53:04

【问题描述】：

我正在使用 Material Design 的 Snackbar 和 VueJS，我希望能够检测到小吃店何时关闭。

Snackbar 有一个名为 isOpen 的内置属性，因此我可以使用 return this.snackbar.isOpen; 作为布尔值。但是，没有类似的 isClosed 属性，当小吃店关闭时，isOpen 仍然为 true。

似乎isOpen 对关闭没有反应，只是对打开有反应。但是我想在小吃店打开后关闭时触发一些东西。希望有任何建议

我像这样初始化我的小吃店：

this.snackbar = new MDCSnackbar(document.querySelectorAll(".mdc-snackbar"));

【参考方案1】：

我解决了：

const snackbarElement = document.querySelector(".mdc-snackbar");
this.snackbar = new MDCSnackbar(snackbarElement);

snackbarElement.addEventListener("MDCSnackbar:closed", (event) => 

以前，我试图将 eventListener 添加到小吃店本身?

【参考方案2】：

您应该能够收听MDCSnackbar:closed 事件，记录在events section of the documentation 中。

由于您使用 vue.js 标记了您的问题，我假设您正在将 MDC 集成到 Vue 应用程序中。在这种情况下，我建议您查看vue-mdc-adapter。他们还有更多特定于 Vue 的 documentation for a snackbar。你的小吃店可能是这样的：

<mdc-snackbar v-model="snack" @hide="handleHide"></mdc-snackbar>

@hide – 通知听众快餐栏已被隐藏。

【讨论】：

我看到了，但没有找到足够清楚的文档来告诉我正确的方法。我一直在监听并将调试器传递给回调，但它从未触发

this.snackbar.addEventListener('MDCSnackbar:closed', () => debugger ) 是我使用失败的代码

也试过`window.addEventListener('MDCSnackbar:closed', () => debugger;)`

然后我使用：this.snackbar = new MDCSnackbar(document.querySelectorAll(".mdc-snackbar"));

你知道我如何添加一个事件监听器吗？这里的文档不清楚