侧边栏折叠
parent
4a45c99b09
commit
88cef3b19f
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
// 使用 Event Bus
|
||||||
|
const bus = new Vue();
|
||||||
|
|
||||||
|
export default bus;
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue