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

javascript

<!-- 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

Anweisung an Vue, den Inhalt innerhalb dieses Tags an das Ende des <body> zu verschieben.

v-if="isOpen"

Teleport berücksichtigt Standarddirektiven wie v-if für bedingtes Rendering.

class="modal"

Stile werden weiterhin angewendet, auch wenn sich das Element im DOM verschiebt.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwaltung des Modal-Kontexts mit Teleport

Verwandt