Teleport传送门应用

1. Teleport 基础

1.1 基本用法

<Teleport to="body">
  <div class="modal">模态框内容</div>
</Teleport>

to 属性指定目标容器，内容渲染到该容器中，但逻辑仍属于当前组件。

1.2 条件传送

<Teleport to="body" :disabled="isMobile">
  <Modal />
</Teleport>

disabled 为 true 时，内容渲染在原位。

2. 实际应用

2.1 模态框

<Teleport to="body">
  <div v-if="show" class="modal-overlay" @click="show = false">
    <div class="modal-content" @click.stop>
      <slot />
    </div>
  </div>
</Teleport>

2.2 通知系统

<Teleport to="#notifications">
  <TransitionGroup name="notification">
    <div v-for="n in notifications" :key="n.id" class="notification">{{ n.message }}</div>
  </TransitionGroup>
</Teleport>

2.3 全屏遮罩

<Teleport to="body">
  <div v-if="loading" class="fullscreen-loading">
    <Spinner />
  </div>
</Teleport>

3. 多 Teleport 同一目标

多个 Teleport 到同一目标时，按渲染顺序追加：

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>b</div>
</Teleport>
<!-- 结果：a, b -->