xing/vue-learn
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

菜单折叠

Browse Source
This commit is contained in:
xing 2020-06-17 10:53:59 +08:00
parent e9bdd40e47
commit 81b0bab380
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Home.vue
View File

@ -8,8 +8,10 @@
<el-button type="info" @click="logout">退出</el-button> <el-button type="info" @click="logout">退出</el-button>
</el-header> </el-header>
<el-container> <el-container>
<el-aside width="200px"> <el-aside :width="isCollapsed ? '64px' : '200px'">
<el-menu unique-opened <div @click="toggleCollapse" class="toggle-button">|||</div>
<el-menu unique-opened :collapse="isCollapsed" :collapse-transition="false"
background-color="#313743" background-color="#313743"
text-color="#fff" text-color="#fff"
active-text-color="#3497FF"> active-text-color="#3497FF">
@ -49,10 +51,15 @@ export default {
101: 'iconfont icon-shangpin', 101: 'iconfont icon-shangpin',
102: 'iconfont icon-danju', 102: 'iconfont icon-danju',
145: 'iconfont icon-baobiao' 145: 'iconfont icon-baobiao'
} },
isCollapsed: false,
width: '200px'
} }
}, },
methods: { methods: {
toggleCollapse () {
this.isCollapsed = !this.isCollapsed
},
logout () { logout () {
sessionStorage.clear() sessionStorage.clear()
this.$router.push('/login') this.$router.push('/login')
@ -107,4 +114,13 @@ export default {
.el-menu { .el-menu {
border-right: none; border-right: none;
} }
.toggle-button{
background-color: #495164;
color: #ffffff;
font-size: 10px;
line-height: 24px;
text-align: center;
letter-spacing: .2em;
cursor: pointer;
}
</style> </style>