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

embedded/2024/11/14 12:12:03/

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.ppmy.cn/embedded/137194.html

相关文章

Prompt Engineering Guide

文章目录 Prompt Engineering Guide提示工程简介基本概念包含要素要避免不明确的prompt技术关注做了什么&#xff0c;不要关注不做什么角色提示Role Prompting 提示技术CoT生成的知识作为预测的知识库判断的一部分Prompting ChainingToT思维链检索增强RAGPrompt策略分析 提示应…

STM32WB55RG开发(3)----生成 BLE 程序连接手机APP

STM32WB55RG开发----3.生成 BLE 程序连接手机APP 概述硬件准备视频教学样品申请源码下载参考程序选择芯片型号配置时钟源配置时钟树RTC时钟配置RF wakeup时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙设置工程信息工程文件设置结果演示 概述 本项目旨…

探索深度学习的本质

深度学习的本质是利用多层&#xff08;深层&#xff09;的神经网络结构来从数据中学习复杂的模式和特征。其主要特点是具有层次结构&#xff0c;能够实现自动特征提取。非线性、可扩展性和迁移学习能力是深度学习能够处理复杂问题和广泛&#xff08;低成本&#xff09;应用的关…

使用ookii-dialogs-wpf在WPF选择文件夹时能输入路径

在进行WPF开发时&#xff0c;System.Windows.Forms.FolderBrowserDialog的选择文件夹功能不支持输入路径&#xff1a; 希望能够获得下图所示的选择文件夹功能&#xff1a; 于是&#xff0c;通过NuGet中安装Ookii.Dialogs.Wpf包&#xff0c;并创建一个简单的工具类&#xff1a; …

计算机毕业设计Python流量检测可视化 DDos攻击流量检测与可视化分析 SDN web渗透测试系统 网络安全 信息安全 大数据毕业设计

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

金价大跌,特朗普胜选或成导火索

黄金光芒不再&#xff0c;美元强势崛起 上周特朗普赢得美国总统选举后&#xff0c;金价出现了大幅下跌。这标志着市场情绪正在发生转变&#xff0c;投资者开始从避险资产转向风险资产。 为何金价会下跌&#xff1f; 美元走强&#xff1a; 特朗普的胜选提振了美元&#xff0c;…

如何使用 Puppeteer 和 Browserless 抓取亚马逊产品数据?

您可以在亚马逊上找到所有有关产品、卖家、评论、评分、特价、新闻等的相关且有价值的信息。无论是卖家进行市场调研还是个人收集数据&#xff0c;使用高质量、便捷且快速的工具将极大地帮助您准确地抓取亚马逊上的各种信息。 为什么抓取亚马逊产品数据很重要&#xff1f; 亚…

渗透利器-kali工具 (第三章-5) sqlmap之sql注入一、二

一&#xff1a;常见的注入方式 1.sqlmap用于Access数据库注入 2.sqlmap用于Cookie注入  --cookie 3.sqlmap用于Post注入  --froms 、--data、抓包 4.sqlmap用于mysql注入 绕过waf脚本测试&#xff1a;--tamper "space2morehash.py" 常见sqlmap使用方法&#xff1…