解决vue多层弹框时存在遮挡问题

本文给大家介绍vue多层弹框时存在遮挡问题,解决思路首先想到的是找到对应的遮挡层的css标签,然后修改z-index值,但是本思路只能解决首次问题,再次打开还会存在相同的问题,故该思路错误,下面给大家带来一种正确的思路,一起看看吧

 

问题: 

如上图所示,当存在多层弹框时,点击黄色弹框中红色内容,弹出蓝色弹框时,出现上述情况,即表现出顶层弹框被遮挡的现象,当我们点击蓝色弹框时又会出现遮挡消失的情况,下面将对这一问题提出相应的解决办法。

解决方案:

本人解决思路,首先想到的是找到对应的遮挡层的css标签,然后修改z-index值,从而解决不同弹框遮挡层在页面的z-index的不同,但是本思路只能解决首次问题,再次打开还会存在相同的问题,故该思路错误

正确思路:

查看组件中不同属性的作用,我使用的蓝色弹框是使用的element组件中的dialog组件,故此,通过查找该组件中的属性,发现以下三个属性跟遮挡层有关

  遮挡层是必须要使用的,故此排除modal,可以通过在dialog弹框中添加modal-append-to-body或者append-to-body来测试是否能解决以上问题,如果是单层遮挡的话,使用第一个,多层遮挡的话,添加第二个,内部原因还未了解清楚,如有人了解相关问题,欢迎指导。

<el-dialogtitle="提示"append-to-body  :visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog>

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

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

相关文章

Vue3 快速入门 (四) : 使用路由实现页面跳转

1. 本文环境 Vue版本 : 3.4.29Node.js版本 : v20.15.0系统 : Windows11 64位IDE : VsCode 2. vue 路由 Vue Router 是 Vue 官方的客户端路由解决方案。 客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时&#…

中间件的理解

内容来源于学习网站整理。【一看就会】什么是前端开发的中间件&#xff1f;_哔哩哔哩_bilibili 每日八股文~白话说mq&#xff0c;消息中间件_哔哩哔哩_bilibili 例如&#xff1a; 1&#xff09;两个人打电话&#xff0c;中间的通信网络就是中间件。 2&#xff09;菜鸟驿站&…

npm、pnpm、yarn使用淘宝镜像

文章目录 npmpnpm安装方法Windows其它 设置镜像 yarn npm # 查询当前使用的镜像源 npm get registry# 设置为淘宝镜像源 npm config set registry https://registry.npmmirror.com/# 还原为官方镜像源 npm config set registry https://registry.npmjs.org/pnpm 安装方法 Wi…

MyBatis中的优点和缺点?

优点: 管 1.基于 SQL语句编程&#xff0c;相当灵活&#xff0c;不会对应用程序或者数据库的现有设计造成任何影响&#xff0c;SQL单独写&#xff0c;解除 sq!与程序代码的耦合&#xff0c;便于统一。 2.与JDBC 相比&#xff0c;减少了 50%以上的代码量&#xff0c;消除了 JDB…

流式数据库 |RisingWave 的架构、容错、数据持久化

在上一篇文章中&#xff0c;已经为大家分享了 RisingWave 相关核心概念和术语。本文将在此基础上为大家介绍 RisingWave 的架构、容错以及数据持久化。 1. 架构 RisingWave 的架构如下图所示。它由三个主要部分组成&#xff1a;Meta 节点、Compute 节点和 Compactor 节点。 …

【代码随想录算法训练营第42期 第一天 | LeetCode704. 二分查找、27. 移除元素】

代码随想录算法训练营第42期 第一天 | LeetCode704. 二分查找、27. 移除元素 一、704. 二分查找 解题代码C&#xff1a; class Solution { public:int search(vector<int>& nums, int target) {int l 0, r nums.size() - 1;while(l < r){int mid l r 1 >…

linux环境安装mongoDB

一、安装单体mogodb 目标&#xff1a;在Linux中部署一个单机的MongoDB&#xff0c;作为生产环境下使用。 提示&#xff1a;和Windows下操作差不多。 步骤如下&#xff1a; &#xff08;1&#xff09;先到官网下载压缩包 mongod-linux-x86_64-4.0.10.tgz 。 &#xff08;2&…

SpringBoot Bean管理

我们知道可以通过Spring当中提供的注解Component以及它的三个衍生注解&#xff08;Controller、Service、Repository&#xff09;来声明IOC容器中的bean对象&#xff0c;同时我们也学习了如何为应用程序注入运行时所需要依赖的bean对象&#xff0c;也就是依赖注入DI。 本篇主要…

c++初阶知识——内存管理与c语言内存管理对比

目录 前言&#xff1a; 1.c&#xff0b;&#xff0b;内存管理方式 1.1 new和delete操作自定义类型 2.operator new与operator delete函数 2.1 operator new与operator delete函数 3.new和delete的实现原理 3.1 内置类型 3.2 自定义类型 new的原理 delete的原理 new…

Oracle12c及更高版本中引入的新特性CDB数据库容器和PDB可插拔数据库

Oracle的CDB&#xff08;Container Database&#xff0c;数据库容器&#xff09;和PDB&#xff08;Pluggable Database&#xff0c;可插拔数据库&#xff09;是Oracle 12c及更高版本中引入的新特性&#xff0c;旨在支持多租户环境&#xff08;Multitenant Environment&#xff…

python取色器

本文使用创作助手。 要在Python中识别图片的颜色&#xff0c;你可以使用PIL&#xff08;Python Imaging Library&#xff09;库。以下是一种基本的方法来识别图片中的颜色&#xff1a; from PIL import Imagedef get_image_colors(image_path):# 打开图片image Image.open(i…

gite+picgo+typora打造个人免费笔记软件

文章目录 1️⃣个人笔记软件2️⃣ 配置教程2.1 使用软件2.2 node 环境配置2.3 软件安装2.4 gite仓库设置2.5 配置picgo2.6 测试检验2.7 github教程 &#x1f3a1; 完结撒花 1️⃣个人笔记软件 最近换了环境&#xff0c;没有之前的生产环境舒适&#xff0c;写笔记也没有劲头&…

图——图的遍历(DFS与BFS算法详解)

前面的文章中我们学习了图的基本概念和存储结构&#xff0c;大家可以通过下面的链接学习&#xff1a; 图的定义和基本术语 图的类型定义和存储结构 这篇文章就来学习一下图的重要章节——图的遍历。 目录 一&#xff0c;图的遍历定义&#xff1a; 二&#xff0c;深度优先…

【代码随想录】【算法训练营】【第58天 2】 [卡码102]沉没孤岛

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 58&#xff0c;周四&#xff0c;ding~ 题目详情 [卡码102] 沉没孤岛 题目描述 卡码102 沉没孤岛 解题思路 前提&#xff1a;修改孤岛的值 思路&#xff1a;DFS or BFS&#xff0c;使用visite…

探寻大模型回答9.9和9.11犯错的根本原因

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

每日OJ_牛客_排序子序列

目录 牛客_排序子序列 题解及代码 牛客_排序子序列 排序子序列_牛客笔试题_牛客网 题解及代码 本题依次比较整个数组 v[i1]>v[i] &#xff0c;则进入非递减序列判断&#xff0c;直到遍历到下一个值不大于等于为止count&#xff0c;然后进行下一位置的判断v[i1]<v[i]…

算法之判断对称二叉树

94. 二叉树的中序遍历101. 对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;fa…

特斯拉新一代人形机器人Optimus二代:听说行走速度能够提升30%?

在当今这个快速变化的时代&#xff0c;人工智能已成为我们探索未来的一大驱动力。特斯拉以其在电动汽车领域的创新而闻名&#xff0c;而Optimus智能机器人的发布&#xff0c;更是将这种创新精神带到了一个新的领域 1. 智能机器人&#xff1a;Optimus的起源 2021年8月&#xff…

lua 游戏架构 之 TablePool`对象池

定义一个名 TablePool class&#xff0c;用于管理一个对象池。对象池是一种用于优化内存使用的技术&#xff0c;通过重用对象而不是频繁地创建和销毁对象&#xff0c;从而减少内存分配和垃圾回收的开销。 设计思路 1. **初始化**&#xff1a; - initialize 方法初始化对象…

虚拟摄像头怎么用?安卓虚拟相机替换本地摄像头教程(内含3个虚拟摄像头)

虚拟摄像头是一个软件摄像机&#xff0c;电脑没有物理摄像头时可以借助虚拟摄像头进行视频通话。当我们电脑没有自带的摄像头时&#xff0c;必须要外接摄像头才可以进行网络会议、视频直播。普通的摄像头像素不高&#xff0c;直接将手机充当电脑摄像头效果更佳哦。 虚拟摄像头我…