Fix modal backdrop still fading out when the first modal is closing even with additional modals on top

This commit is contained in:
Samuel Elliott 2018-02-19 18:11:47 +00:00
parent fca89aaaa6
commit 6b94437b89
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
1 changed files with 8 additions and 3 deletions

View File

@ -10,11 +10,11 @@
<template> <template>
<div class="bd-modals-container"> <div class="bd-modals-container">
<div v-for="(modal, index) in modals.stack" :key="`bd-modal-${index}`"> <div v-for="(modal, index) in modals.stack" :key="`bd-modal-${modal.id}`">
<div class="bd-backdrop" :class="{'bd-backdrop-out': modal.closing}" :style="{opacity: index === 0 ? undefined : 0}"></div> <div class="bd-backdrop" :class="{'bd-backdrop-out': closing}" :style="{opacity: index === 0 ? undefined : 0}"></div>
<div class="bd-modal-wrap" :style="{transform: `scale(${downscale(index + 1, 0.2)})`, opacity: downscale(index + 1, 1)}"> <div class="bd-modal-wrap" :style="{transform: `scale(${downscale(index + 1, 0.2)})`, opacity: downscale(index + 1, 1)}">
<div class="bd-modal-close-area" @click="closeModal(modal)"></div> <div class="bd-modal-close-area" @click="closeModal(modal)"></div>
<component :is="modal.component" /> <keep-alive><component :is="modal.component" /></keep-alive>
</div> </div>
</div> </div>
</div> </div>
@ -37,6 +37,11 @@
eventListener: null eventListener: null
}; };
}, },
computed: {
closing() {
return !this.modals.stack.find(m => !m.closing);
}
},
created() { created() {
Events.on('bd-refresh-modals', this.eventListener = () => { Events.on('bd-refresh-modals', this.eventListener = () => {
this.$forceUpdate(); this.$forceUpdate();