Comments (2)
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.
Proposed solution(s):
1. 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();
}
}
}
2. 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();
}
}
}
Notes
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
from vue-js-modal.
⬆️ I've asked another modal module's developer whether his module fixes the problem.
from vue-js-modal.
Related Issues (20)
- delete vm--overlay background opacity
- Disabling the escape key handler HOT 3
- The function of closing the modal window on Esc has no reactivity HOT 1
- vue3 support HOT 1
- Cannot read properties of undefined (reading '$modal') HOT 5
- Modal is not scrollable when adaptive is true HOT 1
- How to set border-radius HOT 1
- Problem with styles in component inside modal call
- vee-validate validation not working once wrapped with vue-js-modal
- Unable to preventDefault inside passive event listener due to target being treated as passive HOT 1
- Got "Incorrect or missing password" when installing this package HOT 1
- text-align on v-modal causes problems in RTL languages
- Can add the close button dynamically?
- Incorrect documentation on Events section
- TypeError: Cannot read properties of undefined (reading 'show') HOT 2
- Clunky behaviour on reloading pages with SSR nuxt HOT 1
- TypeError: undefined is not an object (evaluating 'e.prototype.$modal')
- Create for version three
- vue-js-modal supporting vue js 3latest version HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-js-modal.