一、Teleport
1、Teleport的功能
Teleport 是一个内置的组件，它允许你将某个组件或元素的渲染位置“传送”到 DOM 中的其他位置，而不是跟随其父组件的层级进行渲染。
通常情况下，Vue 组件的 DOM 节点会按照其父组件的结构被插入到 DOM 树中。然而，有时我们希望某些元素（比如模态框、通知、悬浮菜单等）出现在页面的不同位置，而不受其父组件的限制。Teleport 就是为了解决这个问题而引入的。传递过去的html代码是独立的，不能插入的原代码中。
2、典型的使用场景
- 模态框（Modal）: 模态框通常需要在页面的根节点上进行渲染，以避免被其他 CSS 样式或布局限制。
- 通知（Notification）: 通知一般出现在页面的顶部或角落，不应受到其父组件位置的限制。
- 浮动元素（Dropdown/Menu）: 这些元素可能需要在视觉上脱离它们的父组件，避免因 overflow 等样式被剪裁。
3、参数介绍
Teleport 的参数
to: 接受一个 CSS 选择器或 DOM 元素，指定要传送到的目标位置。例如：
to="body"：将内容传送到 <body>。
to="#app"：将内容传送到带有 id="app" 的元素中。
disabled: 如果设为 true，则 Teleport 组件会取消传送，内容会在原地渲染。<teleport to="" :disabled="true">代码或者是组件
</teleport>
4、实例：
<template>
<div><button @click="showModal = true">Open Modal</button><!-- 使用 Teleport 将模态框传送到 body 标签内, 可以to 到id,class,元素选择器等等 --><teleport to="body"><!--内部也可以是个组件--><div v-if="showModal" class="modal"><p>This is a modal!</p><button @click="showModal = false">Close</button></div></teleport>
</div>
</template><script setup lang="ts">import {ref} from 'vue'const showModal = ref(false)</script><style lang="scss" scoped>.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%