【Vue3】自定义Modal的fixed无效

现有一个模态框,目前一切正常,Modal可以在视口正确位置展示
在这里插入图片描述

<template><div class="father"><h3>模态框的父组件</h3><button @click="showModal = !showModal">显示/隐藏modal</button><div class="modal" v-if="showModal"><h3>模态框</h3></div></div>
</template><script setup lang="ts">
import { ref } from "vue"
const showModal = ref(false)
</script><style scoped>
.father {width: 500px;height: 500px;background-color: #fdf;
}
.modal {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);width: 300px;height: 100px;background-color: #dfb;text-align: center;
}
</style>

但如果将Modal的父元素样式添加 transform: scale(1) 后,Modal的fixed出错,根据父组件定位。

在这里插入图片描述

position: fixed 能够相对于浏览器窗口定位有一个条件,那就是不能有任何祖先元素设置了 transformperspective 或者 filter 样式属性。

此时需要使用Vue3的内置组件Teleport,将Modal放入body中即可。

<Teleport> 接收一个 to 属性来指定传送的目标。to 的值可以是一个 CSS 选择器字符串,也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue “把以下模板片段传送到 body 标签下”。

<Teleport to="body"><div class="modal" v-if="showModal"><h3>模态框</h3></div>
</Teleport>

注意:<Teleport> 挂载时,传送的 to 目标必须已经存在于 DOM 中。理想情况下,这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的,需要确保在挂载 <Teleport> 之前先挂载该元素。

至此,效果正常。

禁用Teleport

在某些场景下可能需要视情况禁用 <Teleport>。举例来说,在桌面端将一个组件当做浮层来渲染,但在移动端则当作行内组件。可以通过对 <Teleport> 动态地传入一个 disabled 属性来处理这两种不同情况。

<Teleport :disabled="isMobile">...
</Teleport>

多个Teleport共享目标

一个可重用的模态框组件可能同时存在多个实例。对于此类场景,多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上,而顺序就是简单的顺次追加,后挂载的将排在目标元素下更后面的位置上。

比如下面这样的用例:

<Teleport to="#modals"><div>A</div>
</Teleport>
<Teleport to="#modals"><div>B</div>
</Teleport>

渲染的结果为:

<div id="modals"><div>A</div><div>B</div>
</div>

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

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

相关文章

NzN的C++之路--this指针

在已经入门了类和对象之后&#xff0c;今天我们来到了类和对象的part2部分--this指针。先三连后看是好习惯&#xff01;&#xff01;&#xff01; 目录 一、this指针的引入 二、this指针的特性 三、this指针必会 四、C语言和C实现Stack的对比 1. C语言实现 2. C实现 一、…

如何确认RID池是否耗尽,以及手动增加RID池大小

确认RID池是否耗尽&#xff1a; 事件查看器&#xff1a; 在RID主控域控制器上打开事件查看器&#xff0c;导航至“Windows日志 > 应用程序和服务日志 > Microsoft > Windows > Directory Service > Operations”。搜索事件ID 16656和16657。事件ID 16656表明RID…

Jupyterlab+内网云穿透傻瓜式教程

文章目录 Jupyterlab内网云穿透傻瓜式教程1、Miniforge安装2、Jupyter Lab安装3、Python语言服务器安装4、PowerShell 7安装5、更改jupyter lab配置6、内网穿透7、高级体验 Jupyterlab内网云穿透傻瓜式教程 1、Miniforge安装 如下图&#xff0c;以Windows安装为例&#xff0c…

DFS:floodfill算法解决矩阵联通块问题

floodfill&#xff0c;翻译为洪水灌溉&#xff0c;而floodfill算法本质上是为了解决在矩阵中性质相同的联通块问题。 一、图像渲染 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int dx[4]{0,0,1,-1};int dy[4]{1,-1,0,0};int prev;//记住初始值int m,…

LangChain-10(2) 加餐 编写Agent获取本地Docker运行情况 无技术含量只是思路

可以先查看 上一节内容&#xff0c;会对本节有更好的理解。 安装依赖 pip install langchainhub编写代码 核心代码 tool def get_docker_info(docker_name: str) -> str:"""Get information about a docker pod container info."""result…

色彩在设计中的重要性

title: 色彩在设计中的重要性 date: 2024/4/6 19:08:21 updated: 2024/4/6 19:08:21 tags: 色彩心理品牌识别用户体验文化差异创意设计视觉传达易读性 色彩是设计中不可或缺的元素&#xff0c;它不仅可以影响人的情绪和心理状态&#xff0c;还可以在品牌识别、用户体验、文化差…

【C++练级之路】【Lv.19】【STL】unordered_set类和unordered_map类的模拟实现

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、哈希表&#xff08;改造版&#xff09;1.1 结点1.2 迭代器1.2.1 operator 1.3 本体1.3.1 成员变量和…

掌握 TypeScript 核心:从基本类型到面向对象编程,理论详解与Vue3实践运用

TypeScript 是一种开源的编程语言&#xff0c;由微软公司开发&#xff0c;于2012年10月首次公开发布。 TypeScript 是 JavaScript 的超集&#xff0c;这意味着任何合法的 JavaScript 代码都是有效的 TypeScript 代码。它在 JavaScript 的基础上添加了静态类型系统、类、接口、模…

【Linux】有关时间的命令(date、timedatectl)

专栏文章索引&#xff1a;Linux 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、data命令 1.介绍 2.常用参数 3.常用选项 二、timedatectl命令 1.介绍 2.常用子命令 一、data命令 1.介绍 date命令用于显示或设置系统的时间与日期&#xff0c;语法格式为&a…

Nacos 入门篇---客户端如何发起服务注册?怎么发送服务心跳的(二)

一、引言 上个章节我们简单学习和使用了下Nacos服务自动注册&#xff0c;本文就来分析下Nacos客户端自动注册服务是怎么实现的&#xff5e; 二、目录 目录 一、引言 三、Nacos 源码编译 1.1 拉取代码 1.2 运行起来 四、客户端使用版本选择 五、Nacos客户端项目启动为什么会…

java数据结构与算法刷题-----LeetCode415. 字符串相加

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 模拟小学加法运算 模拟小学加法运算 解题思路&#xff1a;时间复…

深入浅出 -- 系统架构之分布式集群的分类

一、单点故障问题 集群&#xff0c;相信诸位对这个概念并不陌生&#xff0c;集群已成为现时代中&#xff0c;保证服务高可用不可或缺的一种手段。 回想起初集中式部署的单体应用&#xff0c;因为只有一个节点&#xff0c;因此当该节点出现任意类型的故障&#xff08;网络、硬件…

MySQL复制拓扑4

文章目录 主要内容一.启用GUID并配置循环复制1.其中&#xff0c;UUID用来唯一标识每一个服务器&#xff0c;事务的编号记录了在该服务器上执行的事务的顺序。使用SELECT server_uuid\G命令可以查看服务器的UUID&#xff0c;sever1的UUID值显示如下&#xff1a;代码如下&#xf…

区域自动气象站讲解

TH-QC10当我们每天查看天气预报&#xff0c;安排出行计划&#xff0c;或是在户外活动时关注天气变化&#xff0c;很少有人会想到这一切背后默默付出的“英雄”——区域自动气象站。这些看似不起眼的气象监测设备&#xff0c;却在我们日常生活中扮演着至关重要的角色。今天&…

单链表经典oj题 (一) 简单

1.删除指定节点数据&#xff08;非尾节点&#xff09;&#xff0c;要求时间复杂度为O(1) . - 力扣&#xff08;LeetCode&#xff09; 在之前我们将单链表删除指定节点的操作是先遍历找到pos的前一个结点&#xff0c;然后再进行删除&#xff0c;但是现在要求再O(1)时间内完成&am…

Kubernetes有状态任务

有状态任务是指执行期间需要维护一定状态或数据的任务或工作。这些任务通常需要记录并维护数据、状态、上下文或进度信息&#xff0c;并且这些信息在任务执行期间保持持久。有状态任务的解决目标是确保任务在不同的环境、节点或时间点之间维持一致的状态和标识。这种任务通常需…

2-3 AUTOSAR ASW Runable可运行实体

返回总目录->返回总目录<- 目录 一、概述 二、RTE Event 一、概述 运行实体(Runnable Entity,RE)是一段可执行的代码,其包含实际实现的函数(具体的逻辑算法或者操作)。一个软件组件可以包含一个或者多个运行实体。 Runnable就是SWC中的函数,而在AutoSAR架构在被…

Windows Server 2012 R2安装远程桌面服务

文章目录 一、打开【服务器管理器】二、点击【添加角色和功能】三、点击【下一步】四、点击【下一步】五、点击【下一步】![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/05b61a830faf477e81f858ec00bbdfff.png)六、勾选【远程桌面服务】→点击【下一步】七、点击【…

sharo反序列化漏洞

启动docker 服务 sudo service docker start 打开靶场 sudo docker run -d -p 80:8080 medicean/vulapps:s_shiro_1 输入docker虚拟机地址打开靶机sharo框架 如何利用漏洞 打开工具目录在终端中打开 输入靶机地址 打开yaki监听端口可以设置为6666 返回工具填写靶机ip和端口 …

Windows应急响应

1.排查隐藏账号 查看注册表 找到攻击者用户目录文件 排查用户异常 eventvwr.msc 分析用户登录日志 排查可疑端口 排查可疑进程 检查启动项、计划任务和服务 查看系统补丁信息 安装火绒&#xff0c;在安全工具里有火绒剑 计划任务 使用D盾对主机进行检测&#xff0c;发现隐藏账户…