Open mhjb opened 12 months ago
Hello there,
I am currently facing the same problem. We have registered some hotkeys in our app, with some of them opening modals. Pressing a hotkey multiple times should not open the modal multiple times.
singleInstance
A new property called singleInstance
would help a lot! Setting singleInstance: true
for a modal:
this.$modal.show(MyModal, ..., { singleInstance: true }, ...);
The modal detection logic could be implemented like this:
beforeOpen(event) {
if (event.params.singleInstance === true) {
let componentName = this.name; // 'MyModal'
let modals = this.$modal.context.root.__modalContainer?.modals;
let alreadyOpen = modals.some(m => m.component.name === componentName)
if (alreadyOpen) {
event.cancel();
}
}
}
preventOtherModals
An additional property could be preventOtherModals
. It could prevent any new modal from opening if another modal is already present.
this.$modal.show(MyModal, ..., { preventOtherModals: true }, ...);
beforeOpen(event) {
if (event.params.preventOtherModals === true) {
let modals = this.$modal.context.root.__modalContainer?.modals;
let preventOpening = modals.length > 0;
if (preventOpening) {
event.cancel();
}
}
}
Implementing this property globally for all modals would be the preferred solution, instead of manually adding the beforeOpen
event to each modal component.
For the code snippets I took some inspiration from the conditional modal example: https://github.com/euvl/vue-js-modal/blob/master/demo/src/App.vue#L97-L101 https://github.com/euvl/vue-js-modal/blob/master/demo/src/components/Modal_Conditional.vue#L18-L25
⬆️ I've asked another modal module's developer whether his module fixes the problem.
Hi team
I have a button whose
@click
event is attached to a function that does some work, then runsthis.$modal.show(…)
. I want to prevent multiple clicks resulting in multiple modals. I am looking for something likeif (this.$modal.isVisible) …
, but can't find anything like that. Any ideas?Thank you Matthew