代码:
<template> <div> <el-container> <el-aside width="230px"> <div> <!-- style="244px" --> <el-menu default-active="2" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </div> </el-aside> <el-container> <el-header>Header</el-header> <el-main> <div style="font-size:50px;">main</div> <div style="font-size:50px;">main</div> <div style="font-size:50px;">main</div> <div style="font-size:50px;">main</div> </el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </div> </template> <script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script> <style lang="stylus" scoped> .el-header, .el-footer { background-color: #B3C0D1; color: #333; text-align: center; line-height: 60px; } .el-menu{ border-right:none } .el-aside { background-color: #545c64; color: #333; text-align: center; line-height: 200px; height: 100vh; position:fixed; top:0; left:0; overflow-y:hidden; overflow-x:hidden; } .el-aside:hover{ overflow-y:auto; } .el-aside::-webkit-scrollbar {/*滚动条整体样式*/ 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .el-aside::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #B3C0D1; } .el-aside::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #D3DCE6; } .el-main { background-color: #E9EEF3; color: #333; text-align: center; line-height: 160px; min-height: calc(100vh - 120px); } body > .el-container { margin-bottom: 40px; } .el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { line-height: 260px; } .el-container:nth-child(7) .el-aside { line-height: 320px; } </style>
效果: