解锁 Vue 3 Teleport 的魔力

news2024/11/14 12:11:46

偶然遇到一个场景,在项目开发中蒙层是很常见的一个组件,我们期望它会在 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 仍然有效,因为它在客户端运行时会重新定位内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2064295.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

初识网络--网络基础概念

目录 1 网络的发展 2 协议 ​编辑 3 网络传输的流程 局域网 跨网络通信 1 网络的发展 计算机是被人设计出来&#xff0c;为人提供计算服务的&#xff0c;而人是需要协作的&#xff0c;那么就注定计算机之间也必须要协作&#xff0c;计算机之间的协作就是靠互通数据来完成…

MySQL的源码安装

目录 1 编译前的准备 1.1 安装cmake 1.2 安装gcc 2 源码编译安装 2.1 使用cmake检查环境并指定路径 2.2 使用 make 进行源码编译 2.3 使用 make install 安装MySQL 3 MySQL源码安装环境配置 3.1 创建mysql 用户 3.2 编辑my.cnf 文件 3.3 conkconfig 创建开机自启服务 3.4 配置…

这 2 个 GitHub 项目,YYDS!

01 &#x1f9e0; 构建你的第二大脑&#xff1a;SuperMemory 在这个信息爆炸的时代&#xff0c;我们每天都在互联网上浏览和保存大量的信息&#xff0c;但往往这些宝贵的数据就像被扔进了黑洞&#xff0c;再也没有被回顾和利用。 SuperMemory 开源项目应运而生&#xff0c;旨在…

OLED(hal库)、OLED取模

目录 OLED&#xff08;hal库&#xff09; IIC通讯协议 软件IIC ​编辑 硬件IIC 移植OLED代码 代码测试 ​编辑 测试 这是我改好滴文件 OLED取模 软件 ​编辑文字 图片 OLED&#xff08;hal库&#xff09; IIC通讯协议 软件IIC 软件I2C&#xff08;或IIC&…

:class的用法及应用

参考小满视频 在同一个标签中&#xff0c;class只能有一个&#xff0c;:class也只能有一个 :class的用法 1. :class “非响应式的变量”&#xff08;一般不使用&#xff0c;和写死了一样&#xff09; const a "style1" <span :class"a"></spa…

JSONP实现跨域访问

JSONP实现跨域访问 课程目标 1、理解JSONP跨域访问的解决方案和实现原理 2、能够利用JavaScript后台和JQuery实现跨域处理 3、理解JavaScript后台代码回调的工作机制&#xff0c;并实现代码回调 4、综合上述&#xff0c;利用JSONP实现跨域访问 一、生成JSON响应 1、生成…

Nginx--监控

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、Nginx的基础监控 进程监控 端口监控 注意&#xff1a; 这两个是必须要加在zabbix监控&#xff0c;加触发器有问题及时告警。 nginx 提供了ngx…

8-9月强化速成|30天带刷《严选题》《660》

如果你的目标是90-100分&#xff0c;肯定是够了&#xff0c;但是像下面这样微调一下更好 你的基础阶段做的是辅导讲义上的题目&#xff0c;那么你的基础阶段的题量肯定是够了。 但是强化阶段如果只做660题和严选题&#xff0c;这个题量还有有一些薄弱的&#xff0c;建议可以把…

在线BLOG网

TOC springboot0785在线BLOG网 第1章 绪论 1.1课题背景 计算机的普及和互联网时代的到来使信息的发布和传播更加方便快捷。人们可以通过计算机上的浏览器访问多个应用系统&#xff0c;从中获取一些可以满足用户生活需求的管理系统。网站系统有时更像是一个大型“展示平台”…

【MySQL】半同步模式

1 半同步模式原理 1. 用户线程写入完成后 master 中的 dump 会把日志推送到 slave 端 2.slave 中的 io 线程接收后保存到 relaylog 中继日志 3. 保存完成后 slave 向 master 端返回 ack 4. 在未接受到 slave 的 ack 时 master 端时不做提交的&#xff0c;一直处于等待当收到…

Linux离线安装fontconfig

Linux离线下载yum包&#xff0c;安装字体库 一、下载安装包 以CentOS Linux release 7.9.2009下载fontconfig的rpm包的为例 http://mirror.centos.org/centos/7/按提示跳转历史库 找到对应版本的centos https://vault.centos.org/7.9.2009/os/x86_64/Packages/在Packages目…

5个免费的文章生成器,为你在线生成高质量原创文章

在ai技术发展的今天&#xff0c;我们面对文章创作再也不用感到苦恼&#xff0c;无论是没有创作灵感&#xff0c;还是不擅长写作&#xff0c;只要有了文章生成器&#xff0c;那么它就能帮助我们轻松完成任何类型的文章创作。文章生成器虽然很强大&#xff0c;但是市面上众多的文…

服务器备份

服务器备份 一、方案 FreeFileSync freeSSHd Windows任务计划程序 FreeFileSync&#xff1a;设置文件备份方案&#xff08;双向同步、镜像同步、更新同步、自定义同步&#xff09;&#xff0c;适用于本地的文件同步之外&#xff0c;还支持 Google Driver、SFTP 和 FTP 三种…

【Docker】安装Docker环境遇到的坑(VirtualBox)

利用vagrant工具在VirtualBox安装CentOS7环境后&#xff0c;安装Docker环境遇到的坑 前期准备工作 1、卸载原有环境 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engi…

10 Java数据结构:包装类、数组(Array工具类)、ArrayList

文章目录 前言一、包装类1、Integer&#xff08;1&#xff09;基本用法&#xff08;2&#xff09;JDK5前的包装类用法&#xff08;了解即可&#xff0c;能更好帮助我们理解下面的自动装箱和自动拆箱机制&#xff09;&#xff08;3&#xff09;自动装箱与自动拆箱机制 --- 导致&…

bbr 收敛动力学背后的数学原理

我进一步把 bbr 模型简化为更一般的形式。设 x 为 bbr 流的 estimated bw&#xff0c;wₓ 为 bbr 流的 inflight&#xff0c;C 为瓶颈带宽&#xff0c;R 为传播时延&#xff0c;R_s 为总时延&#xff0c;pacing_rate 增益为 g&#xff1a; I ( t ) t o t a l _ i n f l i g h …

火绒使用详解 为什么选择火绒?使用了自定义规则及其高级功能的火绒,为什么能吊打卡巴斯基,360,瑞星,惠普联想戴尔的电脑管家等?

目录 前言 必看 为什么选择火绒&#xff1f; 使用了自定义规则及其高级功能的火绒&#xff0c;为什么能吊打卡巴斯基&#xff0c;360&#xff0c;瑞星&#xff0c;惠普联想戴尔的电脑管家等&#xff1f; 原因如下&#xff1a; 火绒的主要优势 1. 轻量化设计 2. 强大的自…

CocosCreator 3.8 IOS 热更新失败问题解决方案

CocosCreator 3.8 IOS 热更新失败问题解决方案 问题描述 Creator 版本&#xff1a; 3.8.0目标平台&#xff1a; ios 模拟器/真机重现方式&#xff1a;安卓构建版本生成的热更新包&#xff0c;上传到OSS&#xff0c;使用ios进行更新。 19:18:36 [ERROR]: [ERROR] file /Applica…

自动化测试—等待方式详解

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 在自动化测试中&#xff0c;等待是一个重要的技术&#xff0c;用于处理页面加载、元素定位、元素状态改变等延迟问题。 等待能够确保在条件满足后再进行后续操作…

Web前端:CSS篇(三)盒子模型,弹性盒子

CSS 盒子模型 所有HTML元素可以看作盒子&#xff0c;在CSS中&#xff0c;"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 盒子模型的作用…