问题: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 - 白杨的博客