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

news2025/1/11 7:53:19

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.coloradmin.cn/o/1232334.html

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

相关文章

腾讯云轻量数据库1核1G性能测评、租用费用和详细介绍

腾讯云轻量数据库服务采用腾讯云自研的新一代云原生数据库 TDSQL-C&#xff0c;融合了传统数据库、云计算与新硬件技术的优势&#xff0c;100%兼容 MySQL&#xff0c;实现超百万级 QPS 的高吞吐&#xff0c;128TB 海量分布式智能存储&#xff0c;保障数据安全可靠。腾讯云百科t…

Android Termux安装MySQL,内网穿透实现公网远程访问

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…

【Linux】:进程间通信和日志模拟

进程间通信 一.基本概念二.简单的通信-管道(匿名管道)1.建立通信信道2.通信接口 三.命名管道三.模拟命名管道通信&#xff08;加上日志&#xff09;1.完整代码2.基本使用 一.基本概念 是什么 两个或多个进程实现数据层面的交互。 因为进程独立性的存在&#xff0c;导致进程间…

【前段基础入门之】=>CSS3新特性 BFC

什么是BFC( 概念) W3C 上对 BFC 的定义&#xff1a; MDN 上对 BFC 的定义&#xff1a; 简而言之 开启了BFC能解决什么问题 元素开启 BFC 后&#xff0c;其子元素不会再产生 margin 塌陷问题元素开启 BFC 后&#xff0c;自己不会被其他浮动元素所覆盖元素开启 BFC 后&#xff0…

【Java】多线程-wait/notify

1、wait和notify Java的多线程中&#xff0c;线程的执行顺序和时间都是不定的。为了控制线程的调度顺序&#xff0c;前面我们引入了join()方法。 但是join()只能在线程执行完后&#xff0c;才能执行其他线程&#xff0c;有没有什么方法可以在线程执行顺序中来调度其他线程呢&…

代码随想录 Day50 单调栈 LeetCodeT503 下一个最大元素II T42接雨水

前言 前面我们说到了单调栈的第一题,下一个最大元素I,其实今天的两道题都是对他的变种,知道第一个单调栈的思想能够想清楚,其实这道题是很简单的 考虑好三个状态,大于等于小于,其实对于前面这些题目只要细心的小伙伴就会发现其实小于和等于的处理是一样的都是直接入栈,只有大于…

灵魂拷问std::enable_shared_from_this,揭秘实现原理

灵魂拷问std::enable_shared_from_this&#xff0c;揭秘实现原理 引言 在C编程中&#xff0c;使用智能指针是一种安全管理对象生命周期的方式。std::shared_ptr是一种允许多个指针共享对象所有权的智能指针。然而&#xff0c;当一个对象需要获取对自身的shared_ptr时&#xff0…

中贝转债上市价格预测

中贝转债-113678 基本信息 转债名称&#xff1a;中贝转债&#xff0c;评级&#xff1a;A&#xff0c;发行规模&#xff1a;5.17亿元。 正股名称&#xff1a;中贝通信&#xff0c;今日收盘价&#xff1a;49.2元&#xff0c;转股价格&#xff1a;32.8元。 当前转股价值 转债面值…

JavaScript中的random小案例

前言 Math对象是JavaScript的内置对象&#xff0c;而random是Math对象属性 Math.random&#xff08;&#xff09;函数返回一个浮点数&#xff0c;伪随机数在范围从0 到小于1&#xff0c;也就是说&#xff0c;从 0&#xff08;包括 0&#xff09;往上&#xff0c;但是不包括 1&a…

Python编程技巧 – 使用字典

Python编程技巧 – 使用字典 Python Programming Skills – Using Dictionary Dictionary, 即字典&#xff0c;这是Python语言的一种重要的数据结构&#xff1b;Python字典是以键&#xff08;key&#xff09;值(value)对为元素&#xff0c;来存储数据的集合。 前文提到Python列…

春秋云境靶场CVE-2022-30887漏洞复现(任意文件上传漏洞)

文章目录 前言一、CVE-2022-30887描述和介绍二、CVE-2021-41402漏洞复现1、信息收集2、找可能可以进行任意php代码执行的地方3、漏洞利用找flag 总结 前言 此文章只用于学习和反思巩固渗透测试知识&#xff0c;禁止用于做非法攻击。注意靶场是可以练习的平台&#xff0c;不能随…

【电路笔记】-星三角变换(Star-Delta Transformation)

星三角变换&#xff08;Star-Delta Transformation&#xff09; 文章目录 星三角变换&#xff08;Star-Delta Transformation&#xff09;1、概述1.1 单相配置1.2 多相配置 2、三相连接2.1 Y配置2.2 Δ配置 3、Y-Δ 和 Δ-Y 变换3.1 Y-Δ变换3.2 Δ-Y变换3.3 应用 4、总结 本文…

使用ssh在本地环境(Windows)连接虚拟机以及其中的docker容器

配置虚拟机防火墙 防火墙的一系列操作需要root权限&#xff0c;默认是没有root密码的&#xff0c;所以首先需要设置root密码&#xff1a; sudo passwd root按提示完成root密码设置 切换到root账户 su root启用22端口并重启防火墙 firewall-cmd --permanent --add-port22/tc…

【zabbix监控四】zabbix之监控tomcat服务报警

一、监控tomcat服务是否正常运行 1、客户端部署 首先要在zabbix-agent客户端上安装tomcat服务&#xff0c;并能正常启动和关闭 1.1 客户端编写脚本 vim /opt/tomcat.sh#!/bin/bash anetstat -natp |grep 8080|awk {print $6}|grep LISTEN if [[ $a LISTEN ]];thenecho &qu…

【目标测距】雷达投影测距

文章目录 前言一、读取点云二、点云投影图片三、读取检测信息四、点云投影测距五、学习交流 前言 雷达点云投影相机。图片目标检测&#xff0c;通过检测框约束等等对目标赋予距离。计算消耗较大&#xff0c;适合离线验证操作。在线操作可以只投影雷达检测框。 一、读取点云 py…

HandBrake :MacOS专业视频转码工具

handbrake 俗称大菠萝&#xff0c;是一款免费开源的视频转换、压缩软件&#xff0c;它几乎支持目前市面上所能见到的所有视频格式&#xff0c;并且支持电脑硬件压缩&#xff0c;是一款不可多得的优秀软件 优点 ∙Windows, Linux, Mac 三平台支持 ∙开源、免费、无广告 ∙支…

SSM2

DataSource mybatis与Spring整合 事务加载业务层上面 开启事务驱动 上面都是声明式开启事务 图书管理系统 命名规范: java命名规范:驼峰命名法类:大驼峰变量,属性名.方法名:小驼峰 常量使用下划线分割:全大写,单词与单词之间下划线分割数据库命名规范:常用命名规范:下划线…

Python将原始数据集和标注文件进行数据增强(随机仿射变换),并生成随机仿射变换的数据集和标注文件

Python将原始数据集和标注文件进行数据增强&#xff08;随机仿射变换&#xff09;&#xff0c;并生成随机仿射变换的数据集和标注文件 前言前提条件相关介绍实验环境生成随机仿射变换的数据集和标注文件代码实现输出结果 前言 由于本人水平有限&#xff0c;难免出现错漏&#x…

基于单片机K型热电偶温度采集报警系统

**单片机设计介绍&#xff0c; 基于单片机K型热电偶温度采集报警系统 文章目录 一 概要简介系统特点系统组成工作原理应用领域 二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 基于单片机K型热电偶温度采集报警系统介绍 简介 该系统是基于单片…

Unity--互动组件(Scrollbar)||Unity--互动组件(DropDown )

此组件中的&#xff0c;交互&#xff0c;过渡&#xff0c;导航与文章&#xff08;Unity--互动组件&#xff08;Button&#xff09;&#xff09;中的介绍如同&#xff1b; handle rect&#xff1a;&#xff08;父节点矩形&#xff09; 用于控件的滑动“句柄”部分的图形&#xf…