element-plus popover的z-index问题

最新推荐文章于 2024-04-08 23:41:42 发布
最新推荐文章于 2024-04-08 23:41:42 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： 错误分析 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DBXXY/article/details/124926287
版权

popover的z-index问题

因为popover的z-index无法自动增加，导致打开对话框，组件显示无法正常显示

解决办法

将popover的teleported改为false即可

解决过程

版本elementui-plus 2.1.9
在这里插入图片描述
第一次打开对话框时可以正常显示
在这里插入图片描述
第二次打开对话框时发现 popover 在dialog下面
在这里插入图片描述
在这里插入图片描述
于是控制台查看这两个组件的z-index，发现dialog的z-index正常(每次打开+1)，而popover的z-index却保持不变，所以造成了这个原因，查看element-plus文档，发现popover有一个属性
在这里插入图片描述

将popover的teleported改为false即可

在这里插入图片描述

Sn?
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js添加dom到指定div之后，并给添加的dom类名，然后设置其样式，以及el-popover层级z-index过高问题解决。
qq_37635012的博客
11-15 786
给新元素div添加类名，然后设置样式，通过insertBefore属性方法传参，将其放在指定div之后。思路：通过querySelector获取el-table__header-wrapper元素，通过createElement创建一个div，通过。
【ElementUI】Popup组件z-index层级设定机制与自定义方式
热门推荐
csdn_vplus的博客
09-22 1万+
大家好，我是九幡，今天分享一个关于ElementUI Popup型组件显示层级的问题。 目录 现象 实现方式 自定义方式 案例 现象 我们平时在使用ElementUI的时候，也许会发现这样的现象： 像选择器的下拉列表、弹框、对话框、弹出框等Popup类型的组件，他们的DOM上，会通过内联样式设定z-index属性： 并且在我们每次使这些组件从不显示到显示时，它们的z-index就会累加： 并且这个用来做累加的值，是这些组件间共用的： 我们知道，z-index属性可以用来控...
element-plus 中向子组件传递数据的方案——provide/inject 与 symbol 类型的组合使用
最新发布
always_die0的博客
04-08 615
TOC/TOC公司前端组件库用的是 element UI 旧版本改造的，有天无聊在看组件库 issues 的时候发现了一个有意思的：“dialog 的 z-index 默认是 2000，有些场景下需要更高/更低的 zIndex，能不能加一个 feature？组件负责人也觉得很有业务场景，遂根据 element-plus 中的 config-provider 做了一组件，只需要向 config-provider 传入需要 z-index 初始值就行。
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
ylnzzl的博客
10-28 4311
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题
elementui关于弹出的卡片，模态框Z-index与自己编写的定位层问题
Zq
08-29 8504
今天在表格上做了一个右键，你可以认为是一个查看详情，然后呢做了一个遮罩层，遮罩层自己没写，使用的是element的v-loading服务 this.diffModal = this.$loading({ lock: true, spinner: ' ', background: 'rgba(0, 0, 0, 0.1)' }); 然后查询详情的面板就是用了pos...
Vue3问题：如何在页面上添加水印？
m0_74802419的博客
12-09 2701
为了防止网站信息被盗用，以及维护版权标识，常常需要在页面、图片或视频上添加独特水印，以作区分。 同时，水印的添加不仅仅满足于添加，有时候还要能防止用户恶意篡改，时刻保证水印的功效。 所以，这次问题我分为了两种情况：一种是仅添加水印仅可，另一种是添加水印且要防篡改。
2023213-popover弹窗框中的teleported属性--Element-plus踩坑日记
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
02-13 2084
这个插入body元素确实是插入了body元素中，但是它是仅是降了一级成为了。今天在做项目时，有一个地方用到了弹窗框，但是有需求需要修改弹窗的阴影部分。将 popover 的下拉列表插入至 body 元素不应该也生效吗？可知，弹窗框是在组件内容之外了，所以在组件内操作的样式没有对弹窗框生效。我想对阴影进行修改，但是很是纳闷，各种标签选择器都不生效，很奇怪。把这个属性改为false，成功了！带着疑问问了带我实习的师傅，发现了这个属性。而改为false之后就成为下面的效果了。它和我们组件的内容成为兄弟关系了！
react-native-modal-popover：使用Modal的React-Native纯JS popover
02-05
纯JS popover组件，用于本机 关于本模块 原始的现在已过时，因此我决定发布自己的模块，以避免在package.json中使用github url。 在重写过程中有些东西丢失了，但是现在它使用了Modal和本机动画驱动程序，并且还具有...
react-native-popover-view：经过测试，适应性强，轻量级本机组件
02-05
React本机弹出视图 经过测试的，适应性强的轻量级<Popover>组件，用于本机响应。 经过测试并可以在iOS和Android上使用。...import Popover from ' react-native-popover-view ' ;function App () { return (
react-popover：一个用于React的智能popover组件
02-26
react-popover >= 0.5.0支持React 16，而react-popover < 0.5.0适用于React 15.xx ，可能更低。 目前尚无计划使用向后移植的修补程序来支持该库的较早版本，并且不欢迎为此目的使用PR，因为这会增加作者的维护...
react-popover
05-07
Popover React组件 安装 npm install --save @idui/react-popover yarn add @idui/react-popover 好处 完全容易定制。 它有很多道具，包括动画，className，箭头可见性等。 使用样式化组件进行样式化。 能够根据...
react-native-list-popover：弹出以显示可选列表
02-05
Popover是显示项目列表供用户选择的好方法。 使用组件，您可以添加一个非常简单的弹出窗口，其中包含作为子组件的项目列表，并可以从父组件访问选定的项目。 这是向UI添加选项列表的一种非常简单的方法。 从父组件...
elementUI的笔记
weixin_39046590的博客
01-28 271
Popover 弹出框 做项目的时候蒙版遮住了要看的内容z-index的问题需要设置 :modal-append-to-body=‘false’ 这个，一开始使用modal将蒙版关闭但是很丑，如下内容 <el-dialog :visible.sync="visible" :title="rowContent.title" :modal-append-to-body='false' :close-on-click-modal=
[elementPlus] teleported 在 ElSubMenu中的用途
iOSTianNan的博客
12-17 683
一个菜单对应的路由结构如上图。
【elementplus】body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
bbt953的博客
07-12 2226
body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）
M31Gargantua的博客
03-12 4689
vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）
Z-index优先级设置无效
musheqianqian的博客
01-12 1080
①父级元素溢出隐藏或者不显示。 ②父级元素层级低。 ③没有设置定位。
解决el-popover嵌入表格多列显示和被表格遮挡的问题
Smilelifeeveryday的博客
03-03 3329
vue + elementUI的el-popover在表格中小弹窗的使用问题
element-plus popover组件 取消小箭头的方法 请给我一段示例代码
04-16
好的，关于取消 element-plus popover 组件的小箭头，可以通过在 popover 组件上添加 `popper-class` 属性，并自定义该类名来实现。具体示例代码如下： ``` <template> <el-button type="text" v-popover:demo> 点我显示 Popover </el-button> <el-popover ref="demo" popper-class="no-arrow" placement="bottom-start" width="200px"> <p>这是一段内容</p> </el-popover> </template> <style> .no-arrow .el-popover__arrow { display: none; } </style> ``` 在上述代码中，我们定义了 `popper-class` 属性，并指定为 `"no-arrow"`，并在样式中自定义了组件的样式，将小箭头隐藏掉。这样就可以实现取消 popover 组件小箭头的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值