Teleport

W NOVA LAB system alarmowy wyświetla alert na głównym ekranie stacji, niezależnie od tego który moduł go wywołał. Vue ma

<Teleport>

- mechanizm renderowania treści w innym miejscu DOM, poza hierarchią komponentu.

Problem

Modale, toasty i popupy logicznie należą do komponentu, ale wizualnie powinny być renderowane na najwyższym poziomie DOM (np. bezpośrednio w

<body>

), aby uniknąć problemów z

z-index

overflow: hidden

i pozycjonowaniem.

Podstawy Teleport

1<script setup>
2import { ref } from 'vue'
3const showModal = ref(false)
4</script>
5
6<template>
7  <div class="module-panel">
8    <h2>Oxygen Module</h2>
9    <button @click="showModal = true">Show Alert</button>
10
11    <Teleport to="body">
12      <div v-if="showModal" class="modal-overlay">
13        <div class="modal">
14          <h3>Critical Alert!</h3>
15          <p>Oxygen level below 20%</p>
16          <button @click="showModal = false">Dismiss</button>
17        </div>
18      </div>
19    </Teleport>
20  </div>
21</template>

Treść wewnątrz

<Teleport>

jest renderowana fizycznie w

<body>

, ale logicznie należy do komponentu - ma dostęp do jego danych i props.

Atrybut to

Atrybut

to

przyjmuje selektor CSS:

1<!-- Do body -->
2<Teleport to="body">...</Teleport>
3
4<!-- Do elementu z ID -->
5<Teleport to="#modal-container">...</Teleport>
6
7<!-- Do elementu z klasą -->
8<Teleport to=".notifications">...</Teleport>

Disabled Teleport

Możesz dynamicznie wyłączyć teleportację:

1<script setup>
2import { ref } from 'vue'
3const isMobile = ref(false)
4</script>
5
6<template>
7  <!-- Na mobile renderuj lokalnie, na desktop w body -->
8  <Teleport to="body" :disabled="isMobile">
9    <div class="popup">
10      <p>Popup content</p>
11    </div>
12  </Teleport>
13</template>

Gdy

disabled=true

, treść renderuje się w oryginalnym miejscu w drzewie komponentów.

Wiele Teleportów do jednego celu

Możesz mieć kilka

<Teleport>

renderujących do tego samego elementu - treść jest dołączana w kolejności:

1<template>
2  <Teleport to="#notifications">
3    <div class="toast">Alert 1</div>
4  </Teleport>
5
6  <Teleport to="#notifications">
7    <div class="toast">Alert 2</div>
8  </Teleport>
9</template>

Przejdź do CodeWorlds→