Есть библиотека модального окна
https://sweet-modal-vue.adepto.as/
Работает хорошо. Но есть проблема.
Если щелкать на крестик или за окном модалки, то модалка не уничтожается, а скрывается. Контент в модалках начинает глючить на объектах в цикле - переключатели при множественном открытии перестают нажиматься. Крестик этой модалки (кнопка закрывания) находится внутри библиотеки и мной не контролируется. Т.е. я не могу повесить на него запуск экшена, который бы уничтожил модалку. И клик вне окна модалки, ее закрывающий, тоже внутри библиотеки естественно.
У этого компонента есть ref="modal"
в самом компоненте в data есть boolean свойства
is_open и visible
они связаны с этими кнопками закрытия и с нажатиев вне окна. Они и скрывают модалку.
можно ли как-то по реф отследить, что свойства эти изменились и вызвать уже мой метод, который уничтожит модалку по событию внутри этого компонента? Или другим способом.
vue и js знаю на поверхностном уровне, которого достаточно для большинства моих задач. Если что-то сложное то без примера, на одном объяснении не вывезу. Заранее благодарен добрым людям.
<template>
<div>
<sweet-modal ref="modal">
<slot v-if="is_open_modal" name="form"></slot>
</sweet-modal>
<slot name="info"></slot>
<element @click.prevent="openModal">
<slot name="open-button"></slot>
</element>
</div>
</template>
<script>
import { SweetModal, SweetModalTab } from "sweet-modal-vue";
export default {
components: {
SweetModal,
SweetModalTab,
},
data() {
return {
is_open_modal: false,
};
},
props: {
data: Object,
},
methods: {
openModal() {
this.is_open_modal = true;
this.$refs.modal.open();
},
closeModal() {
this.is_open_modal = false;
this.$refs.modal.close();
},
},
};
</script>
