Nebucatnetzer
/
vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lesson 135: move the teleport tag to the BaseDialog

This commit is contained in:
Andreas Zweili 2021-02-08 20:22:22 +01:00
parent cf78b35666
commit 8c310f17c2
2 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
2021-02-08 prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue
View File

@ -1,18 +1,20 @@
<template> <template>
<div @click="$emit('close')"></div> <teleport to="body">
<dialog open> <div @click="$emit('close')"></div>
<header> <dialog open>
<slot name="header"> <header>
<h2>{{ title }}</h2> <slot name="header">
</slot> <h2>{{ title }}</h2>
</header> </slot>
<section><slot name="default"></slot></section> </header>
<menu <section><slot name="default"></slot></section>
><slot name="actions"> <menu
<base-button @click="$emit('close')">Close</base-button> ><slot name="actions">
</slot></menu <base-button @click="$emit('close')">Close</base-button>
> </slot></menu
</dialog> >
</dialog>
</teleport>
</template> </template>
<script> <script>
export default { export default {

28
2021-02-08 prj-cmp-01-starting-setup/src/components/resources/AddResource.vue
View File

@ -23,21 +23,19 @@
</div> </div>
</form> </form>
</base-card> </base-card>
<teleport to="body"> <base-dialog
<base-dialog v-if="inputIsInvalid"
v-if="inputIsInvalid" title="Input may not be empty"
title="Input may not be empty" @close="resetErrorDialog"
@close="resetErrorDialog" >
> <template #default>
<template #default> <p>Unfortunately some inputs seem to be empty.</p>
<p>Unfortunately some inputs seem to be empty.</p> <p>Please correct this and try again.</p>
<p>Please correct this and try again.</p> </template>
</template> <template #actions>
<template #actions> <base-button @click="resetErrorDialog">Ok</base-button>
<base-button @click="resetErrorDialog">Ok</base-button> </template>
</template> </base-dialog>
</base-dialog>
</teleport>
</template> </template>
<script> <script>