Zoom缩放后el-dropdown下拉菜单位置偏移问题

        做项目时缩放适配屏幕时，发现element的el-dropdown组件存在下拉时会产生偏移。结合element源码popper.js，当屏幕变化或者滚动时，会动态计算元素的定位位置信息，从而导致位置偏移。

 偏移效果图

 解决方案

       1. 给el-dropdown-menu上面添加:append-to-body="false"

1.  
   <el-dropdown>
2.  
   <span class="el-dropdown-link">开发专用</span>
3.  
   <!-- 解决el-dropdown缩放后偏移问题 -->
4.  
   <el-dropdown-menu slot="dropdown" :append-to-body="false">
5.  
   <el-dropdown-item>修改密码</el-dropdown-item>
6.  
   <el-dropdown-item>切换登录</el-dropdown-item>
7.  
   </el-dropdown-menu>
8.  
   </el-dropdown>

       2.重写ui组件样式，重写定位信息，覆盖原有样式，注意 ！important 提高样式等级

1.  
   ::v-deep .el-dropdown-menu {
2.  
   min-width: 120px;
3.  
   position: absolute !important;
4.  
   top: 35px !important;
5.  
   left: -45px !important;
6.  
   }

这篇好文章是转载于：学新通技术网