增加样式布局 增加toggleClick监听

Author: bigrocs

src/components/Layout.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="layout ">
-    <div class="layout-menu-left">
+  <div class="layout" :class="{ hideSidebar: isSidebar }">
+    <div class="layout-sidebar-left">
       <layout-sidebar/>
     </div>
     <div class="layout-right">
-      <layout-navbar/>
+      <layout-navbar  v-on:sidebar="toggleClick"/>
       <layout-breadcrumb/>
       <layout-content/>
       <layout-footer/>
@@ -25,6 +25,16 @@
       layoutBreadcrumb,
       layoutContent,
       layoutFooter
+    },
+    data() {
+      return {
+        isSidebar:false
+      }
+    },
+    methods: {
+      toggleClick() {
+        this.isSidebar = !this.isSidebar
+      }
     }
   }
 </script>
@@ -38,15 +48,23 @@
     overflow: hidden;
     display: -webkit-box;
     &.hideSidebar {
-      >.layout-menu-left {
+      >.layout-sidebar-left {
         width: 50px;
         >.sidebar-container {
-          width:50px;
+          >.layout-logo-lg{
+            display: none;
+          }
+          >.layout-logo-mini{
+            display: block;
+          }
+          >.sidebar-menu {
+            width:50px;
+          }
         }
       }
     }
   }
-  .layout-menu-left{
+  .layout-sidebar-left{
     width: 200px;
   }
   .layout-right{

src/components/Layout/Navbar.vue

@@ -13,7 +13,7 @@
     name: 'navbar',
     methods: {
       toggleClick() {
-        console.log('test')
+        this.$emit('sidebar')
       }
     }
   }

src/components/Layout/Sidebar.vue

@@ -1,9 +1,10 @@
 <template>
-  <div>
-    <div class="layout-logo-left">CoreCMF</div>
-    <el-menu default-active="1-4-1" theme="dark" class="sidebar-container">
+  <div class="sidebar-container">
+    <div class="layout-logo-lg">CoreCMF</div>
+    <div class="layout-logo-mini">Core</div>
+    <el-menu default-active="1-4-1" theme="dark" class="sidebar-menu">
       <el-submenu index="1">
-        <template slot="title">导航一</template>
+        <template slot="title"><i class="el-icon-message"></i> 导航一</template>
         <el-menu-item-group title="分组一">
           <el-menu-item index="1-1">选项1</el-menu-item>
           <el-menu-item index="1-2">选项2</el-menu-item>
@@ -56,7 +57,7 @@
 </script>
 <style lang="scss" scoped>
   @import  './../../assets/sass/mixin.scss';
-  .layout-logo-left {
+  .layout-logo-lg {
     background-color: #d73925;
     height: 50px;
     line-height: 50px;
@@ -65,7 +66,17 @@
     text-align: center;
     width: 100%;
   }
-  .sidebar-container {
+  .layout-logo-mini {
+    background-color: #d73925;
+    height: 50px;
+    line-height: 50px;
+    font-size: 20px;
+    color: #fff;
+    text-align: center;
+    width: 100%;
+    display: none;
+  }
+  .sidebar-menu {
     position: fixed;
     width:200px;
     min-height: 100%;
@@ -74,12 +85,8 @@
     overflow-x: hidden;
     @include scrollBar;
   }
-  .el-submenu__title {
-    background-color: #d73925;
+  .el-menu {
+    border-radius: 0px;
   }
-  .el-submenu {
 
-    // background-color: #d73925;
-    border-right-color: #dd4b39;
-  }
 </style>