javascript / intermediate
Snippet
Entkopplung von Modalen mit der Teleport-Komponente
Teleport ermöglicht es Ihnen, einen Teil des Templates einer Komponente an einer anderen Stelle im DOM-Baum (z. B. im Body) zu rendern, während die Logik und der Zustand in der ursprünglichen Komponente erhalten bleiben. Dies ist entscheidend für das z-index-Management in CSS.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template><div class="container"><button @click="isOpen = true">Open Modal</button><Teleport to="body"><div v-if="isOpen" class="modal-overlay"><div class="modal-content"><p>I am rendered outside the container!</p><button @click="isOpen = false">Close</button></div></div></Teleport></div></template><script setup>import { ref } from 'vue';const isOpen = ref(false);</script>
vue
Erklärung
1
<Teleport to="body">
Ziel ist das Ende des <body>-Tags als Rendering-Ziel.
2
v-if="isOpen"
Steuert die Sichtbarkeit des teleportierten Inhalts basierend auf dem Komponentenstatus.