javascript / intermediate
Snippet
Verwaltung des Modal-Kontexts mit Teleport
Teleport ermöglicht es Ihnen, einen Teil des Templates einer Komponente in einen DOM-Knoten zu 'teleportieren', der außerhalb der Hierarchie der Komponente liegt (z. B. den Body). Dies löst Probleme mit z-index und Overflow, während die Komponentenlogik gekapselt bleibt.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- App.vue or parent --><template><div class="container"><button @click="isOpen = true">Open Modal</button><Teleport to="body"><div v-if="isOpen" class="modal"><p>I am rendered at the end of the body!</p><button @click="isOpen = false">Close</button></div></Teleport></div></template>
vue
Erklärung
1
<Teleport to="body">
Anweisung an Vue, den Inhalt innerhalb dieses Tags an das Ende des <body> zu verschieben.
2
v-if="isOpen"
Teleport berücksichtigt Standarddirektiven wie v-if für bedingtes Rendering.
3
class="modal"
Stile werden weiterhin angewendet, auch wenn sich das Element im DOM verschiebt.