<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>导航一</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>
添加回答
举报
0/150
提交
取消