Как определить, была ли закрыта панель управления MDC в JS?

Question

Я использую Snackbar Material Design и VueJS, и я хотел бы иметь возможность определить, когда закусочная закрылась.

Snackbar имеет встроенное свойство isOpen, поэтому я могу использовать return this.snackbar.isOpen; в качестве логического значения. Однако подобного свойства isClosed не существует, и когда закусочная закрывается, isOpen остается верным.

Кажется, что isOpen не реагирует на закрытие, только на открытие. Но я хочу, чтобы что-то сработало, когда закусочная закрылась после того, как была открыта. Буду признателен за любой совет

Я запускаю свою закусочную так:

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

Answer 1

Я решил это:

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

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

Раньше я пытался добавить eventListener к самой закусочной ?

Answer 2

Вы должны иметь возможность прослушивать событие MDCSnackbar:closed, задокументированное в разделе документации .

Поскольку вы отметили свой вопрос vue.js, я полагаю, выинтегрируют MDC в приложение Vue.В этом случае я бы посоветовал вам взглянуть на vue-mdc-adapter.У них есть более специфичная для Vue документация для закусочной .Ваша закусочная может выглядеть примерно так:

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

@hide - уведомить слушателей, что закусочная была скрыта.