vuejs3.0 从入门到精通——Teleport

Teleport

  <Teleport>是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

一、基本用法

https://cn.vuejs.org/guide/built-ins/teleport.html#basic-usage

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

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

  试想下面这样的 HTML 结构：

<div class="outer">
  <h3>Tooltips with Vue 3 Teleport</h3> //包含一个h3标题
  <div>
    <MyModal /> //包含一个模态组件 &ltMyModal/&gt
  </div>
</div>

  接下来我们来看看<MyModal>的实现：

<script setup> //使用 setup 标签, 表明该script使用了vue3的组合式API
import { ref } from 'vue' //创建响应式引用

const open = ref(false)   //创建一个响应式引用, 初始值为false。这个引用用于控制模态窗口的打开和关闭。
</script>

<template>
  <button @click="open = true">Open Modal</button> //包含一个按钮, 当点击时, 会触发 open=true, 从而打开模态窗口。

  <div v-if="open" class="modal"> //这个&ltdiv&gt就是模态窗口,包含一个消息和一个用于关闭模态窗口的按钮, 当 open=true 时打开。
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button> //当 open=false 时关闭。
  </div>
</template>

<style scoped>
.modal {  //定义一个css样式规则,适用于所有具有 "modal" 类的 HTML 元素。
  //将元素的位置设置为“fixed”, 这意味着元素的位置是相对于浏览器窗口的, 而不是相对于其父元素或页面内容的。因此，即使页面滚动，该元素也会停留在同一位置。
  position: fixed;
  //设置了元素的z-index值为999。z-index决定了元素在页面上的堆叠顺序。一个更高的z-index值意味着元素将出现在具有较低z-index值的元素之上。
  z-index: 999;
  //将元素距离页面顶部的位置设置为其父元素高度的20%。因为元素的位置已经被设置为fixed，所以这是相对于浏览器窗口的高度。
  top: 20%;
  //将元素距离页面左边的位置设置为其父元素宽度的50%。同样，因为这是fixed位置，所以这是相对于浏览器窗口的宽度。
  left: 50%;
  //将元素的宽度设置为300像素。
  width: 300px;
  /*
    将元素的左外边距设置为-150像素。这是一个技巧，通常与left: 50%;一起使用，目的是使固定宽度的元素在水平方向上居中。
    元素的左边缘会被移到左侧距离的50%（即元素宽度的一半）的位置，从而达到居中的效果。
  */
  margin-left: -150px;
}
</style>

我理解意思是说： 这段代码是使用 Vue 3 的新特性, &ltscript setup&gt编写的一个模态框&ltModal&gt组件。这个模态窗口可以通过点击一个按钮打开, 并且可以通过点击另一个按钮关闭。这个组件使用了 Vue3 的 Composition API 和 Teleport 功能。其他见代码注释吧。

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

    • position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。也就是说如果我们想要用 CSS transform 为祖先节点 <div class="outer"> 设置动画，就会不小心破坏模态框的布局！
    • 这个模态框的 z-index 受限于它的容器元素。如果有其他元素与 <div class="outer"> 重叠并有更高的 z-index，则它会覆盖住我们的模态框。

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

<button @click="open = true">Open Modal</button>

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

  <Teleport> 接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue“把以下模板片段传送到 body 标签下”。

  你可以点击下面这个按钮，然后通过浏览器的开发者工具，在 <body> 标签下找到模态框元素：

  我们也可以将<Teleport>和<Transition>结合使用来创建一个带动画的模态框。

二、禁用 Teleport

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

template
<Teleport :disabled="isMobile">
...
</Teleport>

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

三、多个 Teleport 共享目标

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

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

  渲染的结果为：

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>
posted @ 2023-11-09 16:19  左扬  阅读(78)  评论(0)  编辑  收藏  举报
levels of contents