解锁 Vue 3 Teleport 的魔力

news2024/11/22 15:07:57

偶然遇到一个场景，在项目开发中蒙层是很常见的一个组件，我们期望它会在 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>