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

ops/2024/11/14 9:02:35/

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/ops/133522.html

相关文章

冗余连接2 hard题 代随C#写法

此题在卡码网109与力扣685题亦有记载 有一说一C#写法我没咋搞懂 就看明白了思路 这里贴一个答案待后续我醒悟了再来看罢 难就难在对整体数据结构classUnion&#xff08;并查集&#xff09;的理解不熟并且 对于输入输出这个迭代过程理解上也比较吃力 109. 冗余连接II 题…

30 秒!用通义灵码画 SpaceX 星链发射流程图

不想读前人“骨灰级”代码&#xff0c; 不想当“牛马”程序员&#xff0c; 想像看图片一样快速读复杂代码和架构&#xff1f; 来了&#xff0c;灵码又加新 buff&#xff01;&#xff01; 通义灵码支持代码逻辑可视化&#xff0c; 可以把你的每段代码画成流程图。 你可以把…

无人机丢失:高效找回的科普指南

无人机作为现代科技的结晶&#xff0c;在多个领域发挥着重要作用&#xff0c;但无人机丢失的情况也时有发生。为了帮助您有效找回丢失的无人机&#xff0c;本文将结合科普知识与实用步骤&#xff0c;提供一套全面的解决方案。 一、启动智能功能 使用GPS定位&#xff1a;如果无人…

Eclipse 首选项(Preferences) 深入解析

Eclipse 首选项(Preferences) 深入解析 Eclipse 是一款广受欢迎的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它为各种编程语言提供了强大的开发工具。Eclipse 的首选项&#xff08;Preferences&#xff09;是其核心功能之一&#xff0c;允许用户根据个人喜好和项目…

DevExpress WinForms中文教程:Data Grid - 如何绑定到实体框架数据源?

在本教程中&#xff0c;您将学习如何将DevExpress WinForms的网格控件绑定到实体框架数据源、如何使用数据注释属性来更改网格显示和管理数据的方式&#xff0c;以及如何将单元格值更改发送回数据源。 P.S&#xff1a;DevExpress WinForms拥有180组件和UI库&#xff0c;能为Wi…

深入理解面向对象编程(OOP):从基础到进阶

深入理解面向对象编程&#xff08;OOP&#xff09;&#xff1a;从基础到进阶 一、引言 在编程的广袤领域中&#xff0c;面向对象编程&#xff08;Object - Oriented Programming&#xff0c;OOP&#xff09;宛如一颗璀璨的明珠&#xff0c;闪耀着独特的光芒。它不仅仅是一种编…

系统安全第七次作业题目及答案

一、 1.RBAC0 RBAC1 RBAC2 RBAC3 2.属性 身份标识 3.接入访问控制 资源访问控制 网络端口和节点的访问控制 二、 1.B 2.A 3.ABE 4.BCD 5.ABC 三、 1. 答&#xff1a;基于属性的访问控制&#xff08;ABAC&#xff09;是通过对实体属性添加约束策略的方式实现主、客体之…

12LangChain实战课 - ReAct框架与代理的应用

LangChain实战课 - ReAct框架与代理的应用 在本次LangChain实战课程中&#xff0c;我们深入探讨了ReAct框架以及代理&#xff08;Agent&#xff09;在大语言模型中的应用。以下是本次课程的核心内容和要点&#xff1a; 1. ReAct框架的介绍 ReAct框架是一种指导大语言模型&am…