Vue移动 HTML 元素到指定位置 teleport 标签

teleport 标签:用于将组件中的 HTML 元素移动到任意的位置。

 使用 teleport 标签移动 HTML 元素:

<!-- 将 teleport 中的内容移动到 body 标签中  -->
<teleport to="body"><div><h3>我是第三层组件的标题</h3><p>我是第三层组件的内容</p><p>我是第三层组件的内容</p><p>我是第三层组件的内容</p></div>
</teleport>

:teleport 标签也可以通过 id 名移动,例如:`<teleport to="#box">`

 

 使用 teleport 标签制作全局弹窗:

第一层组件:

<template><div class="one"><h3>我是One组件(第一层)</h3><hr /><Two></Two></div>
</template><script>
import Two from '../components/Two';
export default {name: "One",components: { Two }
}
</script>

第二层组件:

<template><div class="two"><h3>我是Two组件(第二层)</h3><hr /><Three></Three></div>
</template><script>
import Three from "../components/Three.vue"
export default {name: "Two",components: { Three }
}
</script>

第三层组件(弹窗组件):使用 teleport 标签将弹窗内容移动到 body 标签中。

<template><button @click="isShow = true">显示弹窗</button><teleport to="body"><div class="mask" v-if="isShow"><div class="dialog"><h3>我是弹窗的标题</h3><p>我是弹窗的内容</p><p>我是弹窗的内容</p><p>我是弹窗的内容</p><button @click="isShow = false">关闭弹窗</button></div></div></teleport>
</template><script>
import { ref } from 'vue'
export default {name: "Three",setup() {let isShow = ref(false);return { isShow }}
}
</script><style scoped>
.mask {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 999;display: flex;justify-content: center;align-items: center;
}.dialog {width: 300px;padding: 20px;background-color: aqua;text-align: center;
}
</style>

 最终效果:

原创作者:吴小糖

创作时间:2023.11.21

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

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

相关文章

如何使用http来获取thingsbord中的设备数据

背景 有个读者问我,他想做tb的二次开发,想要通过一个接口来查询设备的遥测数据。 于是我给他写了这篇文章。 具体实现 由于他使用的是cloud版本,于是我使用cloud来做演示 文档的接口 https://thingsboard.cloud/swagger-ui/#/telemetry-controller/getTimeseriesUsing…

数据结构【DS】队列的应用

描述一下如何进行层次遍历&#xff1f; 创建一个空队列&#xff0c;将根节点入队&#xff1b;循环执行以下步骤&#xff0c;直到队列为空&#xff1a; 取出队头结点访问该结点将该结点的所有子节点入队 在计算机系统中的应用 解决主机与外部设备之间速度不匹配的问题&#xf…

react经典面试题解析

一、类组件和函数组件的区别&#xff08;面试常考&#xff09; 简单理解&#xff08;所有同学都要掌握&#xff09; 1、类组件有生命周期&#xff0c;函数组件没有 2、类组件需要继承 Class&#xff0c;函数组件不需要 3、类组件可以获取实例化的 this&#xff0c;并且基于…

V100 GPU服务器安装CUDA教程

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Linux C 线程间同步机制

线程间同步机制 概述保护机制互斥锁创建互斥锁  pthread_mutex_init加锁  pthread_mutex_lock解锁  pthread_mutex_unlock删除锁  pthread_mutex_destroy 条件变量创建条件变量  pthread_cond_init激活条件变量  pthread_cond_signal等待条件变量  pthread_cond_…

python实现炫酷的屏幕保护程序

shigen日更文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 上次的文章如何实现一个下班倒计时程序的阅读量很高&#xff0c;觉得也很实用酷炫&#xff0c;下边是昨天的体验…

2216.美化数组的最少删除数

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2216. 美化数组的最少删除数 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 假设在第 i 个位置前已删除 res 个元素。遍历原数组&#xff0c;对于第 i 个元素&#xff0c;若 (i-res)%20&am…

shell 判断文件是否存在(csh bash)

文章目录 前言1. -e 判断文件是否存在2. -f 判断文件是否存在且为普通文件3. -d 判断文件是否存在且为目录3. -s 判断文件是否存在且不为空4. -r 判断文件是否存在且可读5. -w 判断文件是否存在且可写6. -x 判断文件是否存在且可执行 前言 Shell 编程能提升我们工作效率&#…

QT5 MSVC2017 64bit配置OpenCV4.5无需编译与示范程序

环境&#xff1a;Windows 10 64位 Opencv版本&#xff1a;4.5 QT&#xff1a;5.14 QT5 MSVC2017配置OpenCV 版本参考&#xff1a; opencv msvc c对应版本 1.安装MSVC2017&#xff08;vs2017&#xff09; 打开Visual Studio Installer&#xff0c;点击修改 选择vs2017生成工…

java使用 TCP 的 Socket API 实现客户端服务器通信

一&#xff1a;什么是 Socket(套接字) Socket 套接字是由系统提供于网络通信的技术, 是基于 TCP/IP 协议的网络通信的基本操作&#xff0c;要进行网络通信, 需要有一个 socket 对象, 一个 socket 对象对应着一个 socket 文件, 这个文件在 网卡上而不是硬盘上, 所以有了 sokcet…

3D应用开发引擎HOOPS如何促进AEC数字化架构革新?

随着科技的不断发展&#xff0c;建筑、工程和施工&#xff08;AEC&#xff09;行业正在掀起令人瞩目的数字化转型浪潮。在这一变革的过程中&#xff0c;Tech Soft 3D的HOOPS SDK&#xff08;软件开发工具包&#xff09;正扮演着关键的角色&#xff0c;为构建世界一流的AEC和BIM…

【CVE-2023-4357】Chrome-XXE 任意文件读取漏洞复现及原理解析

官方文档 https://bugs.chromium.org/p/chromium/issues/detail?id1458911 漏洞描述 Short description: Libxslt is the default XSL library used in WebKit based browsers such as chrome, safari etc. Libxslt allows external entities inside documents that are lo…

UML统一建模语言

UML包含3种构造块&#xff1a;事物、关系、图。 事物&#xff1a;模型中代表性成分的抽象关系&#xff1a;把事物结合在一起图&#xff1a;聚集了相关的事物 事物 结构事务&#xff1a;模型的静态部分&#xff0c;包括类、接口、协作、用例、主动类、构件、制品、结点 行为事…

ubuntu 解决pip/pip3安装库各种报错问题

诸如下面类似的报错: 都是由于pip损坏导致 File “/usr/local/bin/pip3”, line 7, in from pip._internal.cli.main import main File “/usr/local/lib/python3.5/dist-packages/pip/_internal/cli/main.py”, line 57 sys.stderr.write(f"ERROR: {exc}") 解绝办法…

py split 用法

在Python中&#xff0c;split()函数用于将字符串按照指定的分隔符进行分割&#xff0c;并返回一个字符串列表。它的基本用法如下&#xff1a; string "Hello, World!" split_string string.split(",") print(split_string)输出结果为&#xff1a; [Hel…

节点导纳矩阵

节点导纳矩阵&#xff08;Node Admittance Matrix&#xff09;是电力系统分析中的关键工具&#xff0c;它用于描述电力系统中不同节点之间的电导和电纳参数。这个矩阵为电力工程师提供了深入了解电力系统运行和分析所需的数学工具。 节点导纳矩阵是一个复数矩阵&#xff0c;通常…

Shell判断:模式匹配:case(一)

一、前言 shell编程中if和case都是用来做流控的。 二、case语法结构 case 变量 in 模式1&#xff09; 命令序列1 ;; 模式2&#xff09; 命令序列2 ;; 模式3&#xff09; 命令序列3 ;; *) 无匹配…

如何科学的进行Android包体积优化

这篇文章会分享小厂如何做包体积优化相关主题&#xff0c;涉及内容包括&#xff1a;1) Android包体积优化的一种可能是比较标准的推进做法&#xff0c;2) 大致流程的心路历程和思考方式&#xff0c;3) 如何去总结和分享你们进行过的包体积优化项目。本文不仅仅是一篇分享&#…

Android Binder 是怎么实现进程间通信

文章目录 Android Binder 是怎么实现进程间通信 Android Binder 是怎么实现进程间通信 Android Binder 机制的实现基于 Linux 内核中的 Inter-Process Communication&#xff08;IPC&#xff09;机制&#xff0c;具体来说&#xff0c;它是通过进程间共享内存和进程间调用&…

SpringCloud--分布式锁实现

一、简介 分布式锁其实就是控制分布式系统中不同进程共同访问共享资源的一种锁的实现。在分布式系统中各个微服务都是独立部署在不同的服务器上&#xff0c;如果多个服务同时操作同一个共享资源的话&#xff0c;就不能像单体服务那样通过synchronized或者Lock等同步机制保证一…