Vue3 -- 新组件【谁学谁真香系列6】

Teleport

Teleport是什么?–Teleport是一种能够将我们的组件html结构移动到指定位置的技术。
父组件:

<template><div calss="outer"><h2>我是App组件</h2><img src="https://z1.ax1x.com/2023/11/19/piNxLo4.jpg" alt=""><br><Modal /></div>
</template><script lang="ts" setup name="App">
import { ref } from "vue"
import Modal from "./Modal.vue";</script><style lang="less">
.outer {background-color: #ddd;border-radius: 10px;padding: 10px;width: 400px;height: 400px;// 滤镜 saturate--饱和度filter:saturate(200%)
}img {width: 270px;
}button {margin: 3px 5px;
}
</style>

注意看父组件中.outer的 filter:saturate(200%),这个样式会让子组件中的fixed定位基于自己的父组件,而不是按照我们的预期根据整个视口定位。
这时候我们就需要在子组件中使用Teleport了,将我们需要按照整个视口定位的内容用<teleport to=""> </teleport> 包裹起来就可以实现预期。

<!-- 这里的to里面可以写选择器字符串,例如'#app''.demo''body' --><teleport to="body"><div class="modal" v-show="isShow"><h2>我是弹窗的标题</h2><p>我是弹窗的内容</p><button @click="isShow = false">关闭弹窗</button></div></teleport>

整个子组件代码:

<template><button @click="isShow = true">展示弹窗</button><!-- 这里的to里面可以写选择器字符串,例如'#app''.demo''body' --><teleport to="body"><div class="modal" v-show

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

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

相关文章

微服务day03

导入黑马商城项目 创建Mysql服务 由于已有相关项目则要关闭DockerComponent中的已开启的项目 [rootserver02 ~]# docker compose down WARN[0000] /root/docker-compose.yml: version is obsolete [] Running 4/4✔ Container nginx Removed …

IAPP仿源码大师主界面UI

仿源码大师首页主界面的布局 首页&#xff0c;分类&#xff0c;需求&#xff0c;我的 就只有这几个界面内容而已 资源静态 没有任何动画和功能 纯UI布局 纯UI布局 https://pan.baidu.com/s/1Hc5nWQCZ_ckQlXXV82OYpA?pwd7826 https://caiyun.139.com/m/i?2i2MoYbkdze41 来源…

mmpretrainmmdetection环境配置

mmpretrain&mmdetection环境配置 适用于cuda11.3torch12.1的mmpretrain&mmdetection环境配置&#xff1a; 第一步&#xff1a;根据官网说明&#xff0c;找到对应cuda版本的torch&#xff0c;安装好torch&#xff1a; pip install torch1.12.1cu113 torchvision0.13.…

【数据湖及大数据方案】数据湖建设方案|数据源|数据流|元数据|数据仓库|指标池|数据清洗

建设大数据湖一体化平台旨在应对数据分散、管理混乱及利用低效等挑战。通过集中存储与管理跨平台数据&#xff0c;打破信息孤岛&#xff0c;实现数据资产的高效整合与利用。该平台强化数据标准、质量控制、开发运维及安全保障&#xff0c;提升数据治理成熟度。此外&#xff0c;…

搭建企业私有云 只需一台设备 融合计算、存储与K8s

Infortrend老牌存储厂商推出 KS 企业私有云产品&#xff0c;将计算节点、存储与Kubernetes整合在一套系统中&#xff0c;为企业提供高效稳定的专属本地私有云平台。 KS 同时内置 Kubernetes 平台和虚拟机管理程序&#xff0c;既能运行云原生容器化应用程序&#xff0c;例如大数…

[Redis] Redis主从复制模式

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

计算机毕业设计Hadoop+PySpark深度学习游戏推荐系统 游戏可视化 游戏数据分析 游戏爬虫 Scrapy 机器学习 人工智能 大数据毕设

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

iOS SmartCodable 替换 HandyJSON 适配记录

前言 HandyJSON群里说建议不要再使用HandyJSON&#xff0c;我最终选择了SmartCodable 来替换&#xff0c;原因如下&#xff1a; 首先按照 SmartCodable 官方教程替换 大概要替换的内容如图&#xff1a; 详细的替换教程请前往&#xff1a;使用SmartCodable 平替 HandyJSON …

16、论文阅读:Mamba YOLO:用于目标检测的基于 SSM 的 YOLO

Mamba YOLO: SSMs-Based YOLO For Object Detection 总结前言感受野为什么Transformer 的结构被引入&#xff0c;显著扩展了模型的感受野&#xff1f;状态空间模型SSM 介绍相关工作实时目标检测端到端目标检测器视觉状态空间模型 方法预处理整体架构ODSS BlockLocalSpatial Blo…

微信小程序 uniapp+vue老年人身体监测系统 acyux

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 过此方式促进老年人辅助程序信息流动和数据传输效率&#xff0c;提供一个内容丰富、功能多样、易于操作的老年人辅助程序…

Intellij IDE报错:[Information:java:javacTask:源发行版8需要目标发行版1.8]

Intellij IDE报错:[Information:java:javacTask:源发行版8需要目标发行版1.8] 处理方法 File->Settings->Build,execution,Deployment->Compiler->Java Compiler 进入该目录下&#xff0c;修改Per-module bytecode version&#xff0c;将该项目修改为8 合理的创…

Pr 沉浸式视频 - 自动 VR 属性

自动 VR 属性 Auto VR Properties是所有 VR 视频效果和视频过渡效果的通用选项。 默认勾选。此选项使效果自动适应 VR 素材的属性&#xff0c;确保在 360 全景环境中无缝显示。 当处理 VR/360 素材时&#xff0c;保持勾选以避免接缝。 当处理非 VR 素材或需要手动设置 VR 属性时…

[项目] C++基于多设计模式下的同步异步日志系统

[项目] C基于多设计模式下的同步&异步日志系统 文章目录 [项目] C基于多设计模式下的同步&异步日志系统日志系统1、项目介绍2、开发环境3、核心技术4、日志系统介绍4.1 日志系统的价值4.2 日志系统技术实现4.2.1 同步写日志4.2.2 异步写日志 5、相关技术知识5.1 不定参…

ubuntu下使用pocketsphinx进行语音识别

文章目录 前言一、pocketsphinx的介绍二、ubuntu下编译三、使用示例1.模型选择2.代码示例3.自定义字典 四、交叉编译总结 前言 由于工作需要语音识别的功能&#xff0c;环境是在linux arm版上&#xff0c;所以想先在ubuntu上跑起来看一看&#xff0c;就找了一下语音识别的开源…

C语言原码、反码和补码的详解

C语言原码、反码和补码的详解 放在最前面的1、前言正数的原码、反码和补码负数的原码、反码和补码 2、整数的原码&#xff08;2.1&#xff09;原码的定义&#xff08;2.2&#xff09;计算原码 3、整数的反码&#xff08;3.1&#xff09;反码的定义&#xff08;3.2&#xff09;计…

知识课堂——高匿ip在不同业务中的重要作用

大家好&#xff01;今天我们来看看高匿ip在不同业务中都能起到什么样的重要作用。第一个会用到的地方就是网络数据采集&#xff0c;也被称为网络爬虫&#xff0c;在是许多企业和机构获取大量数据的重要手段。例如市场调研公司帮助企业制定市场策略就需要收集各个行业的产品价格…

【青牛科技】GC8548替代LV8548/ONSEMI在摇头机、舞台灯、打印机和白色家电等产品上的应用分析

引言 在现代电子设备中&#xff0c;控制芯片的选择对产品的性能和可靠性至关重要。摇头机、舞台灯、打印机和白色家电等领域对芯片的要求日益增加&#xff0c;传统上多采用LV8548/ONSEMI等国际品牌的芯片。然而&#xff0c;随着国内半导体技术的不断进步&#xff0c;芯麦GC854…

【C/C++】字符/字符串函数(0)——由ctype.h提供

零.导言 众所周知&#xff0c;C语言的字符有许多不同的类型&#xff0c;如&#xff1a;数字&#xff0c;字母&#xff0c;标点符号等等等等。 今天&#xff0c;我就给大家讲解一下用于实现字符分类的函数——字符分类函数。 一.什么是字符分类函数&#xff1f; 即实现字符分类的…

专业网页设计服务重要是什么

当在搜索引擎中键入“网页设计”&#xff0c;您将获得超过2000万个相关结果。在如此众多的网站制作公司中&#xff0c;应该如何做出明智的选择呢&#xff1f;首先&#xff0c;让我们深入探讨一下网页设计的重要性。网站设计需要综合各种不同领域的专业知识&#xff0c;它是一个…

【CanMV K230】windows部署AICube,训练模型

【CanMV K230】windows部署AICube&#xff0c;训练模型 dotnet sdk的下载链接配置环境 AI_Cube安装训练AI_Cube安装模型训练 在开发板上运行模型 B站视频链接&#xff1a;《K230 实战》windows系统下使用AI_Cube,训练模型 AI Cube 是由嘉楠科技开发的一款通用视觉 AI 计算平台&…