el-dropdown 在火狐浏览器，下拉框先被其他元素覆盖1s后才置于最上层？

最新推荐文章于 2024-05-15 08:29:44 发布
最新推荐文章于 2024-05-15 08:29:44 发布
阅读量296 收藏
点赞数 3
分类专栏： Element-ui iView 文章标签： elementui iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sm_cute/article/details/133948766
版权
文章讨论了Element-UI组件在火狐浏览器中el-dropdown下拉框被其他元素遮挡的问题，推测可能是官网问题。作者采用按需引入iView组件库的Dropdown作为替代方案，并提供了相关博客链接。
摘要由CSDN通过智能技术生成

问题描述：

        element-ui组件，el-dropdown使用火狐浏览器打开时，下拉框会被其他元素覆盖，大约1s后才会完全置于最上层。

原因：

        目前只觉得是官网自带的问题，有大佬知道更好的解决办法，请随时留言！

我的解决办法：

        因为element-ui有此类问题，于是一不做二不休，直接按需引入了iView组件库的Dropdown。【引入iView组件的博客地址：view-design 全局引入与按需引入-CSDN博客】

超级无敌小小小白
关注
专栏目录
Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
王佳斌
02-27 2337
vue3，element plus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，element plus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
el-dropdown下拉框不对齐问题
Naaaano的博客
12-14 4992
今天在写后台的时候很蛋疼的发现el-dropdown下拉选择插件的下拉框居然错位了，如下图： 可以很明显的看到这个下拉框的位置有些向左边偏，身为强迫症的我不能忍！！一顿排查后发现仅仅是因为下拉菜单的题目是2个字，上面的div长度太短导致的。 我首先想到直接去改个css样式完事，由于elementUI的各种下拉框都是基于popper.js动态计算绝对定位的位置，每次屏幕大小变化或者重新打开下拉框都会重置该框的样式，没法改left值，于是加了这段代码： .el-dropdown-menu { margin-
解决Dropdown下拉菜单展开后子菜单被遮挡一部分的问题
weixin_64101999的博客
10-27 2416
他会根据。
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
miem_yang的博客
07-21 1312
在项目开发的时候用到了el-scrollbar组件 并且设置了隐藏横向滚动条 下面展示一些 内联代码片。 // 隐藏横向滚动条 .el-scrollbar__wrap { overflow-x: hidden; } // 竖向 .el-scrollbar__bar.is-horizontal { height: 0 !important; } 因为有以上设置 所以导致在火狐浏览器的时候最后select 下拉框最后一行总是显示不完全 所以解决方法如下 下面展示一些 内联代码片。 .el-select-d
【elementplus】el-table操作列使用设置teleported: false的el-dropdown时，el-dropdown__popper会被el-table遮挡的问题
bbt953的博客
07-12 1715
el-table操作列使用设置teleported: false的el-dropdown时，el-dropdown__popper会被el-table遮挡的问题
elementUI下拉框放在表格的列中 偶尔出现下拉框数据不显示
m0_46466486的博客
12-04 599
下拉框第一次选中某项item后，关闭弹窗，再次打开，没有数据被选中，但是下拉列表中上次所选的item未清除遗留的focus样式。elementUI下拉框放在表格的列中 偶尔出现下拉框数据不显示。经测试与接口数据无关，写死下拉框列表依然存在该问题。解决方法：改为iview的下拉框后问题可被解决。解决方法：手动将focusIndex设为-1。table内下拉框select被遮盖问题。在Select Props 中加上。只有重新刷新页面才能正常展示数据。
vue中使用requestFullscreen放大元素时el-dropdown被覆盖的问题
minx_6688的博客
08-03 1098
因为el-dropdown的弹出层是和body一个层级 解决： 直接放大 document 这个元素 使用el-select 代替，并设置el-select 的 popper-append-to-body属性为 false
element Select 选择器下拉框被覆盖截断
qq_41534553的博客
05-10 1194
解决： 在对应下拉框el-select 标签 添加calss属性即可。 popper-class="dropdownbox" .dropdownbox{ z-index: 10001 !important; }
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
在使用Vue.js框架结合Element UI组件库搭建后台管理系统时，el-dropdown组件的使用是实现下拉菜单功能的关键。本文将详细介绍如何在Vue+Element的环境下，搭建并实现后台管理系统的下拉菜单功能，特别是el-dropdown...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
修改el-dropdown下拉框的样式，没有效果，所以将el-dropdown的html片段写在当前所在的div里面，而不是body里
flyaway0624的博客
04-25 2725
1.项目中遇到点击页面中其他的地方关闭窗口，但是遇到一个问题el-dropdown元素是写在body里面 2.因此点击el-dropdown的下拉框时窗口就关闭了 所以我们需要把它写在窗口的div里面，在这里用到一个方法 <template> <div> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i clas
element-ui下拉框选项被覆盖的问题
weixin_43856422的博客
08-21 4479
在写项目的时候，发现下拉框的选项被覆盖掉了，显示不出来，这个问题是z-index的。 下拉框选项的z-index的值在2000左右，在运行的过程中，下拉框的选项的html文件会直接跳到body里面，所以你在页面其它（div）盒子设置的z-index就可能成为它的同级，对它进行覆盖，所以在html中设置的z-index不要过高，放置出现覆盖element ui组件的问题。 如图 ...
element ui中的el-dropdown（下拉框）防止点一下就影藏的问题
qq_42208679的博客
12-24 3073
element ui中的el-dropdown（下拉框）防止点一下就影藏的问题 当使用el-dropdown下拉框时，下拉框的每项中，可能需要加入@click、@change或复选框等事件，而el-dropdown-item的事件触发时，el-dropdown下拉框总是会收缩，很不合理。 官网 <el-dropdown trigger="click" placement="left"> <span class="el-dropdown-link"> <button
elementui弹出框被遮罩层挡住的问题
nss33678的博客
03-28 970
2，:modal-append-to-body='false'或者:append-to-body='true'，改变他的这个属性就好。但是遮罩层的范围会变。1，el-dialog直接放在组件最外层div中，就不会出现遮罩问题。偶然发现有个页面会出现这种问题，有两个解决方法。
element-ui框架的el-dialog弹出框被遮罩层挡住了
新技术革命
05-25 1612
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级），知道这个原理就好办了。 问题分析：经过分析源代码可得，el-dialog的显示层和遮罩层都设置了position
vue页面或者网页全屏后，el-dropdown和el-tooltip无法显示
最新发布
WOMENshiNIDE的博客
05-15 1045
【代码】vue页面或者网页全屏后，el-dropdown和el-tooltip无法显示。
IE下弹出层被DropDownList控件遮挡的解决办法
付辉平的.net专栏
07-30 1401
方法1（推荐）：在弹出层的代码中放入如下代码即可解决，注意宽度和高度得根据弹出层的具体大小而定 方法2（针对少数弹出层被遮挡）：改变弹出层布局大小或位置，尽量不要在在DropDownList控件上弹出； 方法3（针对少数弹出层被遮挡）：在执行弹出层脚本的同时，隐藏DropDownList控件。
elementUI-Dropdown多级菜单，鼠标移上后，前一级菜单消失（不显示）
qq_41714508的博客
01-04 1346
【代码】elementUI-Dropdown多级菜单，鼠标移上后，前一级菜单消失（不显示）
导航下拉菜单被遮住或显示不全问题所在和解决办法
热门推荐
FireBird_one的博客
12-21 1万+
导航下拉菜单被banner遮住/显示不全，这种问题是老生常谈了，经常有新手会问，有些人做了2、3年的还会经常犯错，而且好多人还以为是js问题，其实这是基本的css知识。我觉得还是有必要写一遍文章解释给新手们。 一、导航下拉菜单被遮住，那是因为层叠关系错误 我们必须理解层叠关系满足的2个条件： 1、必须是同级；2、二者分别设定了position:relative 或 absolut
el-select和el-dropdown冲突，用了el-dropdown后导致el-select下拉框选完后不能自动隐藏下拉气泡
04-26
el-select和el-dropdown是Element UI库中的两个组件，它们在功能上有一些相似之处，但并不会直接冲突。el-select是一个下拉选择框组件，而el-dropdown是一个下拉菜单组件。 根据你的描述，el-select下拉框选完后不能自动隐藏下拉气泡，这可能是由于你在使用el-dropdown时没有正确配置触发下拉菜单的事件。el-dropdown默认是通过鼠标点击来触发下拉菜单的显示和隐藏的，而el-select则是通过点击下拉框本身来触发下拉框的显示和隐藏。 为了解决这个问题，你可以尝试以下几个步骤： 1. 确保el-select和el-dropdown的使用方式正确，包括正确引入组件、正确配置相关属性和事件等。 2. 检查el-dropdown的触发方式是否正确配置。你可以通过设置`trigger`属性来指定触发方式，例如设置为`hover`表示鼠标悬停时触发，设置为`click`表示鼠标点击时触发。 3. 检查el-select的事件处理函数是否正确。你可以通过监听`change`事件来处理选项变化时的逻辑，并在事件处理函数中调用合适的方法来隐藏下拉气泡。 如果以上步骤都没有解决问题，建议你提供更详细的代码或示例，以便更好地帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级无敌小小小白

感谢老板的打赏~^v^~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值