vue中使用requestFullscreen放大元素时el-dropdown被覆盖的问题

最新推荐文章于 2024-03-21 14:43:00 发布
最新推荐文章于 2024-03-21 14:43:00 发布
阅读量1k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mwh_user/article/details/119360787
版权

因为el-dropdown的弹出层是和body一个层级

解决：

  1. 直接放大 document 这个元素
  2. 使用el-select 代替，并设置el-select 的 popper-append-to-body属性为 false
minx_6688
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【elementplus】el-table操作列使用设置teleported: false的el-dropdown时，el-dropdown__popper会被el-table遮挡的问题
bbt953的博客
07-12 1245
el-table操作列使用设置teleported: false的el-dropdown时，el-dropdown__popper会被el-table遮挡的问题
解决Dropdown下拉菜单展开后子菜单被遮挡一部分的问题
weixin_64101999的博客
10-27 2152
他会根据。
解决：element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
最新发布
weixin_58622844的博客
03-21 668
element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
element-ui框架的el-dialog弹出框被遮罩层挡住了
新技术革命
05-25 1548
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级），知道这个原理就好办了。 问题分析：经过分析源代码可得，el-dialog的显示层和遮罩层都设置了position
el-dropdown 在火狐浏览器，下拉框先被其他元素覆盖1s后才置于最上层？
SM_Cute的博客
10-20 196
el-dropdown 在火狐浏览器，下拉框先被其他元素覆盖1s后才置于最上层？
VUE element-ui之页面全屏时el-select下拉菜单不显示问题解决
HanXiaoXi_yeal的博客
07-27 5068
问题原因：elemrnt-ui会默认将弹出框插入至 body 元素；当设置了某个元素全屏时，会遮挡住原来的select下拉数据。 解决方法： <el-select v-model="value" placeholder="区域选择" :popper-append-to-body="false" //加入此行代码，完美解决 > ...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html下拉列表下来覆盖全屏,详解HTML中select下拉框内容显示不全部分被覆盖的解决方法...
weixin_33224795的博客
06-04 861
HTML中的select下拉框中的内容过长，导致部分被覆盖了，试了各种方法，都没有头绪，最终在option中加title这个属性，发现问题迎刃而解今天，我遇到这样一个问题：查询栏中的下拉框中的内容过长，导致部分被覆盖了。查询了一些资料，有的说用函数控制，有的说用事件控制，有的看不懂，有的实现起来太复杂了。后来，问了一下同事，有没有一些简单的方法，他告诉我在option中加title这个属性，于是按...
el-table的操作列中使用下拉菜单，且下拉菜单不插入body
扮老虎的猪
03-08 2517
el-table 单元格中使用el-dropdown，且不插入到body中，此时，打开的下拉框被遮挡
elementUI --- el-select 下拉框样式覆盖
热门推荐
爱菇凉的博客
07-02 3万+
前因： element UI 组件库中的 select 选择器 中下拉列表的样式，在页面渲染的时候，总是渲染为仅次于body级别的div ，这样子覆盖样子会影响全局其他的select选择器下拉框样式，试图通过给el-select加父标签来覆盖，然而并没有卵用。 控制台看到的渲染结果： 解决方法： 通过 propper-class 来自定义一个类，这样子在控制台可以看到，自定义的类渲染到页面上的效...
el-select选项被弹框遮住
zqq_1119的博客
11-02 1354
打开弹框，里面又select选择器，点击选择器，选项卡会弹出来。但是在做项目的时候出现一个bug，就是选项卡不见了，一开始以为是接口问题，没触发接口，经过一番检查发现是被弹框遮住了，然后网上搜索了一圈方法，又是z-inde什么的，好像对我这里不太有用，还是会出现被遮住的情况。 最后在 el-select 中加入transfer="true" :popper-append-to-body="false"！ 文章转自：el-select选项被遮挡 - 挽你手 - 博客园 感谢大佬提供方法，...
全屏按钮实现，某个块元素全屏展示，全屏按钮图标监听，监听全屏事件，全屏dom里面el-select选项不显示解决
ProgramarQin的博客
11-03 2489
前言：有些时候遇到bug与其把事情想得复杂，还不如回去看看官方文档。 做系统难免会遇到要做到全屏查看的需求，以下即为全屏代码的实现。 <template> <div> <div>测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏</div><button type="button" @click="btnFull">全屏...
大屏项目，在全屏和非全屏的情况下，el-select和el-option一直等宽
weixin_44029605的博客
07-25 439
大屏项目，在全屏和非全屏的情况下，el-select和el-option一直等宽
Element UI select 下拉框样式覆盖
sinat_42804766的博客
03-20 2623
因为我需要写一个大屏页面，然后需要用到select框，我想把select下拉选项的背景颜色改成透明，然后我想覆盖掉它本身的样式。我本来想改变el-select-dropdown的样式，即使使用了 /deep/ 和样后面加 !important，并没有卵用，还发现select下拉框实在最外层的，如下图： 然后我就找了另外一种方法，创建一个新的类，如下图： 然后对这个样式类进行样式修改...
element-ui dropdown 元素太多，显示不开，如何解决
11-21 1856
在用element-ui的dropdown组件来做一个选项选择的入口时，由于系数过多，而它又就是纵向一列显示的，就导致它的列表撑出了画面外，像这样：所以就需要解决一下，解决的办法也很简单，就是定义一个样式让它原来的布局变一下，改成可横向排列的。
解决vue页面加载时和v-if切换时出现的闪屏/闪烁问题
minx_6688的博客
12-02 7295
主要分为两步 1.设置css，注意加！important，方便处理css层级覆盖问题 [v-cloak]{display:none!important} 2.在元素上添加v-cloak指令 3.直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
vite创建的vue3项目安装使用sass
minx_6688的博客
08-29 2663
我开始也是用的 node-sass ，然后一直报错，最后发现居然是直接使用sass 。。。晕???? npm install sass -D
vue中找到el-dropdown-menu的隐藏
05-11
可以使用Vue指令`v-show`或者`v-if`来控制`el-dropdown-menu`的显示与隐藏。 使用`v-show`指令，示例代码如下： ``` <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu v-show="showDropdown"> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> ``` 在Vue组件中定义`showDropdown`变量，来控制`el-dropdown-menu`的显示与隐藏： ``` <template> <el-dropdown> <span class="el-dropdown-link" @click="showDropdown = !showDropdown"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu v-show="showDropdown"> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default { data() { return { showDropdown: false }; } }; </script> ``` 使用`v-if`指令的示例代码如下： ``` <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu v-if="showDropdown"> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> ``` 在Vue组件中定义`showDropdown`变量，来控制`el-dropdown-menu`的显示与隐藏： ``` <template> <el-dropdown> <span class="el-dropdown-link" @click="showDropdown = !showDropdown"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu v-if="showDropdown"> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default { data() { return { showDropdown: false }; } }; </script> ``` 以上是两种常用的控制`el-dropdown-menu`显示与隐藏的方法，具体使用哪种方法，可以根据实际需求来选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值