lementui el-menu侧边栏占满高度且不超出视口

追阿

已于 2024-04-20 17:32:59 修改

阅读量555

点赞数 3

文章标签：前端

于 2024-04-20 13:26:30 首次发布

本文链接：https://blog.csdn.net/qq_45043813/article/details/137996385

版权

文章讲述了如何解决ElementUI侧边栏在使用100vh时高度不匹配视口的问题，通过JavaScript计算侧边栏底部到视口顶部的距离并动态调整侧边栏高度，确保其美观显示。

摘要由CSDN通过智能技术生成

做了几次老是忘记，这次整理好逻辑做个笔记方便重复利用；

问题：elementui的侧边栏是占不满高度的；但是使用100vh又会超出视口高度不美观；

解决办法：

1.获取到侧边栏底部到视口顶部的距离
2.获取到视口的高度减去侧边栏高度获取需要补的高度
3.最后将两个高度相加获取到总的高度
4.设置到el-aside的高度去
在这里插入图片描述

代码：在写侧边栏的组件中添加

在这里插入图片描述

//处理侧边栏菜单100vh超出屏幕
onMounted(()=>{
    let bottomScorll = 0
    //获取到侧边栏dom对象 el-aside
    const element = document.querySelector('.el-aside')
    // 获取el-aside的rect对象
    const rect = element.getBoundingClientRect()
    //视口高度-侧边栏高度 
    //bottom：矩形底部边缘相对于视口的顶部的距离。 height：矩形的高度。
    bottomScorll = window.innerHeight - rect.bottom
    // 动态设置到元素的高度上
    element.style.height = `${rect.height + bottomScorll}px`
})