偶然遇到一个场景,在项目开发中蒙层是很常见的一个组件,我们期望它会在 body 下显示,但有时候代码逻辑结构很合理,组件结构不是很合理,也就是说蒙层组件不在 body 下,比如说:
蒙层组件
<template>
<div class="model">
<slot></slot>
</div>
</template>
<style scoped>
.model {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
left: 0;
top: 0;
}
</style>
MyComponent
<template>
<div class="block">
<h2>区域1</h2>
<button @click="modelVisible = true" class="btn">打开朦层</button>
<Model v-if="modelVisible">
<h2>区域2</h2>
<button @click="modelVisible = false" class="btn">关闭蒙层</button>
</Model>
</div>
</template>
<script>
import Model from './Model.vue'
export default {
components: {
Model
},
data() {
return {
modelVisible: false
}
}
}
</script>
效果为:
到目前为止,一切都很合理,但是当我们在网页上查看代码结构时,会发现:
蒙层组件在 class 为 block 的 div 下,虽然不影响代码逻辑,但我们希望蒙层组件的位置在 body 下。
在 Vue 2 中,组件结构就是最后真实 DOM 元素的结构,不能发生改变。
但 Vue 3 中有一个内置组件 --- Teleport 可以实现我们想要的结构。
<template>
<div class="block">
<h2>区域1</h2>
<button @click="modelVisible = true" class="btn">打开朦层</button>
<Teleport to="body">
<Model v-if="modelVisible">
<h2>区域2</h2>
<button @click="modelVisible = false" class="btn">关闭蒙层</button>
</Model>
</Teleport>
</div>
</template>
逻辑结构不发生任何变化,只是加了 Teleport 组件包裹起来,自此如愿实现。
下面对 Teleport 进行简单的介绍。
1. Teleport 概述
在 Vue 3 中,Teleport 是一个用于将组件的渲染内容移动到 DOM 结构的其他部分的内置组件。
它允许在不打乱组件层级的情况下,将某些元素(如模态框、通知、悬浮菜单等)渲染到指定的DOM 位置。对于实现全局性的 UI 组件非常有用,比如将模态框渲染到 body 标签下,而不是它的父组件内部。
2. 常见的使用场景
1、模态框
模态框通常需要显示在页面的最顶层,覆盖整个页面的内容,而不是受限于父组件的布局。
2、通知类组件
这类组件往往显示在页面的某个固定位置,例如在右上角显示一条通知。
3、悬浮菜单
弹出菜单或工具提示,通常需要再指定的 DOM 元素旁边显示,而不依赖父组件。
3. 基本语法
非常简单,只需要指定一个目标 DOM 位置,然后将内容包裹在 Teleport 组件中即可。
1、简单使用,举个 🌰
<template>
<div class="container">
<h1>这是一个普通的内容</h1>
<Teleport to="body">
<div class="modal">
<p>这是一个被 Teleport 移动的模态框内容</p>
</div>
</Teleport>
</div>
</template>
<style scoped>
.container {
padding: 10px;
border: 2px solid pink;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
这段代码中,Teleport 的 to 属性指向 body,表示将包裹的 div 内容直接移动到 body 标签内部。这样,即使 Teleport 被放在组件树的深处,它的内容也会在页面的最顶部显示。
2、Teleport 的 to 属性
to 属性可以是任意的 CSS 选择器,也可以是一个有效的 DOM 节点。
- to="body":内容将被移动到 body 标签内部。
- to="#app":内容将被移动到 id 为 app 的 DOM 元素内部。
3、Teleport 的 disabled 属性
disabled 属性,如果设置为 true,则 Teleport 不会进行任何传送,内容将按正常的组件层级进行渲染。
<template>
<div class="container">
<Teleport to="body" disabled="false">
<div class="tooltip">这是一个可选禁用的传送内容</div>
</Teleport>
</div>
</template>
<style>
.container {
border: 1px solid pink;
padding: 10px;
}
</style>
4. 注意事项
1、目标元素存在性
使用 Teleport 时,确保 to 属性指向的 DOM 元素在 Teleport 中真实存在,否则内容无法被渲染。
2、全局样式
由于 Teleport 的内容可能被移动到父组件之外的地方,样式作用域可能不再生效,需要使用全局样式。
3、SSR 支持
在服务端渲染(SSR)中,Teleport 仍然有效,因为它在客户端运行时会重新定位内容。