侧边栏折叠

pull/78/head
lin-xin 2018-04-10 20:40:30 +08:00
parent 4a45c99b09
commit 88cef3b19f
5 changed files with 72 additions and 28 deletions

View File

@ -1,5 +1,8 @@
<template> <template>
<div class="header"> <div class="header">
<div class="collapse-btn" @click="collapseChage">
<i class="el-icon-menu"></i>
</div>
<div class="logo">后台管理系统</div> <div class="logo">后台管理系统</div>
<div class="user-info"> <div class="user-info">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
@ -15,9 +18,11 @@
</div> </div>
</template> </template>
<script> <script>
import bus from '../common/bus';
export default { export default {
data() { data() {
return { return {
collapse: false,
name: 'linxin' name: 'linxin'
} }
}, },
@ -33,6 +38,10 @@
localStorage.removeItem('ms_username') localStorage.removeItem('ms_username')
this.$router.push('/login'); this.$router.push('/login');
} }
},
collapseChage(){
this.collapse = !this.collapse;
bus.$emit('collapse', this.collapse);
} }
} }
} }
@ -47,10 +56,18 @@
line-height: 70px; line-height: 70px;
color: #fff; color: #fff;
} }
.collapse-btn{
float: left;
padding: 0 21px;
cursor: pointer;
}
.collapse-btn:hover{
background: rgb(40,52,70);
}
.header .logo{ .header .logo{
float: left; float: left;
width:250px; width:250px;
text-align: center; /* text-align: center; */
} }
.user-info { .user-info {
float: right; float: right;

View File

@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<v-head></v-head> <v-head></v-head>
<v-sidebar></v-sidebar> <v-sidebar></v-sidebar>
<div class="content"> <div class="content" :class="{'content-collapse':collapse}">
<transition name="move" mode="out-in"><router-view></router-view></transition> <transition name="move" mode="out-in"><router-view></router-view></transition>
</div> </div>
</div> </div>
@ -11,9 +11,20 @@
<script> <script>
import vHead from './Header.vue'; import vHead from './Header.vue';
import vSidebar from './Sidebar.vue'; import vSidebar from './Sidebar.vue';
import bus from '../common/bus';
export default { export default {
data(){
return {
collapse: false
}
},
components:{ components:{
vHead, vSidebar vHead, vSidebar
},
created(){
bus.$on('collapse', msg => {
this.collapse = msg;
})
} }
} }
</script> </script>

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" background-color="#324157" <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router> text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
<template v-for="item in items"> <template v-for="item in items">
<template v-if="item.subs"> <template v-if="item.subs">
<el-submenu :index="item.index" :key="item.index"> <el-submenu :index="item.index" :key="item.index">
<template slot="title"> <template slot="title">
<i :class="item.icon"></i>{{ item.title }} <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
</template> </template>
<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index"> <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
{{ subItem.title }} {{ subItem.title }}
@ -15,7 +15,7 @@
</template> </template>
<template v-else> <template v-else>
<el-menu-item :index="item.index" :key="item.index"> <el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon"></i>{{ item.title }} <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
</template> </template>
@ -24,9 +24,11 @@
</template> </template>
<script> <script>
import bus from '../common/bus';
export default { export default {
data() { data() {
return { return {
collapse: false,
items: [ items: [
{ {
icon: 'el-icon-setting', icon: 'el-icon-setting',
@ -93,6 +95,11 @@
onRoutes(){ onRoutes(){
return this.$route.path.replace('/',''); return this.$route.path.replace('/','');
} }
},
created(){
bus.$on('collapse', msg => {
this.collapse = msg;
})
} }
} }
</script> </script>
@ -101,16 +108,14 @@
.sidebar{ .sidebar{
display: block; display: block;
position: absolute; position: absolute;
width: 250px;
left: 0; left: 0;
top: 70px; top: 70px;
bottom:0; bottom:0;
background: #2E363F; }
.sidebar-el-menu:not(.el-menu--collapse){
width: 250px;
} }
.sidebar > ul { .sidebar > ul {
height:100%; height:100%;
} }
.sidebar i{
margin-top: -4px;
}
</style> </style>

View File

@ -0,0 +1,6 @@
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;

View File

@ -19,6 +19,11 @@ a{text-decoration: none}
padding:40px; padding:40px;
box-sizing: border-box; box-sizing: border-box;
overflow-y: scroll; overflow-y: scroll;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
}
.content-collapse{
left: 65px;
} }
.container{ .container{
padding: 30px; padding: 30px;