侧边栏折叠

src/components/common/Header.vue

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

src/components/common/Home.vue

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

src/components/common/Sidebar.vue

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

src/components/common/bus.js

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

static/css/main.css

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