<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 = btn
console.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>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</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>
</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>
聪明的汤姆