Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Add teleport to Modals.

Browse source
This commit is contained in:
Oliver-Akins 2020-12-13 17:17:32 -07:00
parent f823e599b4
commit 42d0fe483e
1 changed files with 16 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/components/Modal.vue
View file

@ -1,18 +1,20 @@
<template> <template>
<transition name="fade" @after-enter="content = true"> <teleport to="body">
<div <transition name="fade" @after-enter="content = true">
v-if="show" <div
class="modal-container" v-if="show"
:class="closable ? 'clickable' : ''" class="modal-container"
@click.self.stop="handleBackgroundClick" :class="closable ? 'clickable' : ''"
> @click.self.stop="handleBackgroundClick"
<transition name="burst" @after-leave="$emit('closed')"> >
<div v-if="content" class="modal unclickable"> <transition name="burst" @after-leave="$emit('closed')">
<slot /> <div v-if="content" class="modal unclickable">
</div> <slot />
</transition> </div>
</div> </transition>
</transition> </div>
</transition>
</teleport>
</template> </template>
<script> <script>