fix: can not use vue teleport with props as root element

This commit is contained in:
Giulio Ganci 2022-04-25 22:51:24 +02:00
parent b0195260c3
commit 88eb9f7ab8
1 changed files with 40 additions and 38 deletions

View File

@ -1,47 +1,49 @@
<template>
<Teleport to="#window-content">
<div class="modal active" :class="modalSizeClass">
<a class="modal-overlay" @click="hideModal" />
<div class="modal-container">
<div v-if="hasHeader" class="modal-header pl-2">
<div class="modal-title h6">
<slot name="header" />
<div class="dummy-wrapper">
<Teleport to="#window-content">
<div class="modal active" :class="modalSizeClass">
<a class="modal-overlay" @click="hideModal" />
<div class="modal-container">
<div v-if="hasHeader" class="modal-header pl-2">
<div class="modal-title h6">
<slot name="header" />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<div v-if="hasDefault" class="modal-header">
<div class="modal-title h6">
<slot />
<div v-if="hasDefault" class="modal-header">
<div class="modal-title h6">
<slot />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<div v-if="hasBody" class="modal-body">
<a
v-if="!hasHeader && !hasDefault"
class="btn btn-clear float-right"
@click="hideModal"
/>
<div class="content">
<slot name="body" />
<div v-if="hasBody" class="modal-body">
<a
v-if="!hasHeader && !hasDefault"
class="btn btn-clear float-right"
@click="hideModal"
/>
<div class="content">
<slot name="body" />
</div>
</div>
<div v-if="!hideFooter" class="modal-footer pt-0">
<button
class="btn btn-primary mr-2"
@click.stop="confirmModal"
>
{{ confirmText || $t('word.confirm') }}
</button>
<button
class="btn btn-link"
@click="hideModal"
>
{{ cancelText || $t('word.cancel') }}
</button>
</div>
</div>
<div v-if="!hideFooter" class="modal-footer pt-0">
<button
class="btn btn-primary mr-2"
@click.stop="confirmModal"
>
{{ confirmText || $t('word.confirm') }}
</button>
<button
class="btn btn-link"
@click="hideModal"
>
{{ cancelText || $t('word.cancel') }}
</button>
</div>
</div>
</div>
</Teleport>
</Teleport>
</div>
</template>
<script>