【玩玩Vue】使用elementui页面布局和控制页面的滚动

原文作者：我辈李想
版权声明：文章原创，转载时请务必加上原文超链接、作者信息和本声明。

---

---

前言

---

一、页面布局

这里布局使用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
2
3
4
5
6
7
8
9

二、页面滚动

1.禁用body的滑动

<script>
export default {
  beforeCreate() {
    document.body.style.overflow = 'hidden';
  },
};
</script>
1
2
3
4
5
6
7

2.禁用el-aside的滚动

<style lang="scss" scoped>
  .el-aside {
    overflow: hidden;
  }
</style>
1
2
3
4
5

3.启动el-main的滚动

<style lang="scss" scoped>
  .el-main {
    position: absolute;
    left: 150px;
    right: 0;
    top: 100px;
    bottom: 0;
    overflow-y: scroll;
  }
</style>
1
2
3
4
5
6
7
8
9
10