<template><div class="main"><el-container><el-header><home-header @btnChange="handleBtnChange"></home-header></el-header><el-container><home-aside :isCollapse="isCollapse"></home-aside><el-main><home-main></home-main></el-main></el-container></el-container></div></template><script>import HomeHeader from './commponents/Header'import HomeAside from './commponents/HomeAside'import HomeMain from './commponents/Main'export default {name: 'Home',components: {HomeHeader,HomeAside,HomeMain},data: function () {return {visible: false,isCollapse: true}},methods: {handleBtnChange: (btn) => {this.isCollapse = btnconsole.log(this.isCollapse)}}}</script><style lang="scss" scoped>@import "~styles/index.scss"; //引入全局樣式.el-header, .el-footer {background-color: #ffffff;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #ffffff;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}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><template><div><el-menu? ? ? ?default-active="2"? ? ? ?class="el-menu-vertical-demo"? ? ? ?@open="handleOpen"? ? ? ?@close="handleClose"? ? ? ?:collapse = "isCollapse"? ? ? ?><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>導(dǎo)航一</span></template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="1-1">選項(xiàng)1</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="1-3">選項(xiàng)3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">選項(xiàng)4</template><el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">導(dǎo)航二</span></el-menu-item></el-menu></div></template><script>export default {props: {isCollapse: Boolean},name: 'HomeAside',methods: {handleOpen (key, keyPath) {console.log(key, keyPath)},handleClose (key, keyPath) {console.log(key, keyPath)}}}</script><style lang="scss" scoped>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}</style>