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"就可以了。

相关推荐
用户47949283569152 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在2 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好12 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
麦麦大数据2 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
qq_339191142 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
明仔的阳光午后3 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人4 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
San305 小时前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze5 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js
先树立一个小目标5 小时前
puppeteer生成PDF实践
前端·javascript·pdf