Element 中的 Dropdown 下拉菜单定位偏移问题

问题:element源码popper.js,当屏幕变化或者滚动时,会动态计算元素的定位位置信息,从而导致位置偏移错位。

案例如图:

 解决方法:

1、强制重新进行定位

 <el-dropdown-menu slot="dropdown" class="lang-select-dropdown">
      <el-dropdown-item command="En" style="font-size:12px">en</el-dropdown-item>
      <el-dropdown-item command="Zh" style="font-size:12px">zh</el-dropdown-item>
</el-dropdown-menu>
<style scoped>
.lang-select-dropdown {
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;
}
</style>

这里可以通过修改定位值强制调整定位

疑问点:这个定位是根据body调整,可能无法适用于不同分辨率的情况(待测试)

2、通过修改跟随的currentPlacement为不存在的值,禁用自动计算

mounted() {
    const dropdownMenu = this.$refs['elDropdown'].$children[0] // 找到dropdown下面的dropdownMenu
    dropdownMenu.$data.currentPlacement = 'start'
}
<style scoped>
.lang-select-dropdown {
  position: absolute;
  top: 30px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  min-width: max-content;
  text-align: center;
}
</style>

以上是我的修改方法,通过修改跟随对齐的方向为不存在的值,禁用自动计算,再略微调整样式,就可以得到想要的结果。

3、第三种,

 转载链接:El-dropdown - 白杨的博客El-dropdown - 白杨的博客El-dropdown - 白杨的博客

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值