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>
<div @click="$emit('close')"></div>
<dialog open>
<header>
<slot name="header">
<h2>{{ title }}</h2>
</slot>
</header>
<section><slot name="default"></slot></section>
<menu
><slot name="actions">
<base-button @click="$emit('close')">Close</base-button>
</slot></menu
>
</dialog>
<teleport to="body">
<div @click="$emit('close')"></div>
<dialog open>
<header>
<slot name="header">
<h2>{{ title }}</h2>
</slot>
</header>
<section><slot name="default"></slot></section>
<menu
><slot name="actions">
<base-button @click="$emit('close')">Close</base-button>
</slot></menu
>
</dialog>
</teleport>
</template>
<script>
export default {

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

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