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

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Element UI提供了Dropdown组件,可以在下拉菜单使用复选框。 在使用Dropdown组件时,我们首先需要引入Element UI库,然后在代码使用`el-dropdown`和`el-dropdown-menu`来创建下拉菜单,再利用`el-checkbox-group`和`el-checkbox`来实现复选框。 以下是一个简单的示例代码: ``` <template> <div> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu> <el-checkbox-group v-model="selectedOptions"> <el-checkbox v-for="option in options" :label="option" :key="option">{{ option }}</el-checkbox> </el-checkbox-group> <el-button slot="dropdown-footer" @click="handleConfirm">确定</el-button> </el-dropdown-menu> </el-dropdown> </div> </template> <script> export default { data() { return { options: ['选项1', '选项2', '选项3'], selectedOptions: [] }; }, methods: { handleConfirm() { console.log(this.selectedOptions); // 处理选的选项 } } }; </script> ``` 上述代码,我们使用了`el-dropdown`作为外层容器,通过点击下拉菜单按钮来展开或收起下拉菜单。在下拉菜单,我们使用`el-checkbox-group`和`el-checkbox`来创建复选框列表,并通过`v-model`来绑定选的选项。 当用户点击确定按钮时,我们可以通过`handleConfirm`方法来处理选的选项。你可以根据实际需求来进行处理,比如发送请求、更新数据等。在示例代码,我们只是简单地通过`console.log`打印选的选项。 希望以上内容对你有帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值