Ce este componenta
În dezvoltarea componentelor de tip fereastră modală, tooltip sau bară de notificare tip toast, amplasarea nodului DOM în interiorul unei ierarhii adânci poate crea probleme severe de CSS (în special cu proprietățile overflow: hidden sau z-index ale părinților).
Componenta <Teleport to="body"> „teleportează” fizic nodurile DOM la sfârșitul etichetei specificate prin selector (de exemplu chiar în <body>), menținând în același timp logica reactivă și comunicarea cu părintele neschimbate.
Exemplu Concret: Fereastră modală teleportată direct în body
<template>
<button @click="deschis = true">Deschide Dialog</button>
<Teleport to="body">
<div v-if="deschis" class="fundal-modal">
<div class="fereastra">
<h3>Confirmare acțiune</h3>
<button @click="deschis = false">Închide</button>
</div>
</div>
</Teleport>
</template>
Întrebări & Exemple de Cod:
Componenta <Teleport> în Vue 3Ai o nelămurire despre utilizarea comenzii
Componenta <Teleport> în Vue 3sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.