vue3内置组件:Teleport

0 阅读1分钟
  1. Teleport:把“渲染出来的 DOM”放到别的地方
    理解:组件逻辑还在原位置,但它的 DOM 可以“挂”到 body 或某个容器里(解决弹窗被父容器 overflow: hidden、z-index、层级限制的问题)。
<template>
  <button @click="open = true">打开弹窗</button>

  <Teleport to="body">
    <div v-if="open" class="modal">
      弹窗内容
      <button @click="open = false">关闭</button>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>

teleport官方内置组件的地址

image.png