数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、基本使用场景

有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。

试想下面这样的 HTML 结构：

 Tooltips with Vue 3 Teleport

接下来我们来看看  的实现：

 import { ref } from 'vue'   const open = ref(false) " _ue_custom_node_="true">  Open Modal   Hello from the modal! Close   .modal {  position: fixed;  z-index: 999;  top: 20%;  left: 50%;  width: 300px;  margin-left: -150px;  } " _ue_custom_node_="true">

这个组件中有一个按钮来触发打开模态框，和一个 class 名为 .modal 的

，它包含了模态框的内容和一个用来关闭的按钮。

当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：

position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。也就是说如果我们想要用 CSS transform 为祖先节点

这个模态框的 z-index 受限于它的容器元素。如果有其他元素与

提供了一个更简单的方式来解决此类问题，让我们不需要再顾虑 DOM 结构的问题。让我们用改写一下：

Open Modal // 通过 to 属性指定将 Teleport 内容传送到的位置。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。   Hello from the modal! Close

Teleport 是Vue 3.0新特性之一。

Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术（保持逻辑上的父子关系）

挂载时，传送的 to 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的，你需要确保在挂载之前先挂载该元素。

二、动态控制 Teleport

在某些场景下可能需要视情况禁用。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对动态地传入一个 disabled prop 来处理这两种不同情况。

使用 disabled 设置为 true 则 to属性不生效， false 则生效

 import { ref } from "vue";  let isMobile = ref(true) " _ue_custom_node_="true">

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新。

三、多个 Teleport 共享目标

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。如下示例：

 A B

渲染结果为：

 A B

四、同一个组件渲染到不同 Teleport 中