<Teleport> renderina komponento žymę kitoje DOM vietoje, nei kur ji deklaruojama jūsų komponento medyje — bet ji logiškai lieka komponento dalis (reaktyvumas, rekvizitai, įvykiai vis dar veikia).
Modaliniai langai, patarimai ir pranešimai dažnai turi būti , kad būtų išvengta CSS problemų — tėvinio , arba sudėjimo konteksto gali nukirpti arba neteisingai išdėlioti modalinį langą. Bet logiškai modalinis langas priklauso komponentui, kuris jį suaktyvina.
<body> vaikaioverflow: hiddentransformz-index<template>
<button @click="open = true">Open Modal</button>
<Teleport to="body"> <!-- render this elsewhere... -->
<div v-if="open" class="modal-overlay">
<div class="modal">
<p>I'm declared inside this component...</p>
<p>...but rendered as a child of <body>!</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>
Modalinio lango žymė yra perkeltas, kad būtų <body> vaikas realiame DOM, išvengiant bet kokio kirpimo/sudėjimo tėvo — bet open, @click ir bet kokie rekvizitai lieka visiškai reaktyvūs, nes logiškai jis yra šio komponento dalis.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Pabėgus iš gaubiamųjų protėvių, modalinis langas gali patikimai padengti visą rodymų sritį ir sėdėti virš viso kito turinio su nuspėjamu z-index.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport šviesiai sprendžia klasikinę CSS problemą, kai perdengjimai (modaliniai langai, patarimai, pranešimai, išskleidžiami meniu) yra nukirpti arba neteisingai sustatyti jų DOM protėvių.
Jis leidžia jums parašyti perdengimą ten, kur jis logiškai priklauso (suaktyvinto komponento viduje, su visu reaktyvumu), kai kuriame jis turi būti DOM (paprastai <body>).
Tai Vue įmontuotas React portalų ekvivalentas — standartinis, patikimas būdas sukurti perdengimo vartotojo sąsają.
IT pokalbių klausimų biblioteka su išsamiais atsakymais — nuo Junior iki Senior.
Paaukoti