el-dropdown全屏模式下不展示下拉菜单处理

解决方式:

el-dropdown-menu标签上加上属性 :append-to-body="false"即可。

javascript 复制代码
<el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown" :append-to-body="false">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

注意:

1.是在el-dropdown-menu上加,不是在 el-dropdown上加。

  1. 加上之后如果样式发生了变化,极大可能是因为代码里有对el-dropdown进行处理,只需要将el-dropdown-menu的样式重置下就行。
javascript 复制代码
 .el-dropdown-menu{
        width:200px;
        font-weight: 400;
}

原因

el-dropdown在全屏模式下不显示下拉菜单,是因为在全屏状态下他的父级依然是body,所以导致我们看不到。

分析说明

用devTools工具查看,发现el-dropdown-menu组件上有接收一个叫"appendToBody"的参数,默认为true

element的其他组件。例如el-date-picker默认在全屏模式下也是也是不展示下拉菜单的,但是加上属性:append-to-body="false"就可以将元素不插入至 body 元素上。同理的,其实element底层已经对el-dropdown-menu也进行了全屏处理,虽然这个属性在文档上没有说明(害我研究好半天~) ,所以只需要给el-dropdown-menu这个标签加上:append-to-body="false"就可以了。

相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef064 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端6 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder7 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句7 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom7 小时前
JavaScript reduce()函数详解
javascript
小飞悟7 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子7 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript