原文作者:我辈李想
版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。
前言
一、页面布局
这里布局使用vue+elementui,使用Container 布局容器。具体使用可以参考相关链接。本博客实现的是左侧菜单+右侧main布局,涉及到汇总页和详情页。我们要实现左侧菜单不滑动,右侧详情时可滑动。
<template>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
二、页面滚动
1.禁用body的滑动
<script>
export default {
beforeCreate() {
document.body.style.overflow = 'hidden';
},
};
</script>
2.禁用el-aside的滚动
<style lang="scss" scoped>
.el-aside {
overflow: hidden;
}
</style>
3.启动el-main的滚动
<style lang="scss" scoped>
.el-main {
position: absolute;
left: 150px;
right: 0;
top: 100px;
bottom: 0;
overflow-y: scroll;
}
</style>