refactor[ScrollBar]: use el-scrollbar (PanJiaChen#646)

PanJiaChen · web-flow · commit 99d53ee0cad3 · 2018-05-05T15:26:08.000+08:00
diff --git a/src/components/ScrollBar/index.vue b/src/components/ScrollBar/index.vue
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -1,18 +1,13 @@
 #app {
-
   // 主体区域
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
     margin-left: 180px;
   }
-
-   // 侧边栏
+  // 侧边栏
   .sidebar-container {
-    .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-    }
-    transition: width .28s;
+    transition: width 0.28s;
     width: 180px !important;
     height: 100%;
     position: fixed;
@@ -22,19 +17,33 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    //reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+    .scrollbar-wrapper {
+      height: calc(100% + 15px);
+      .el-scrollbar__view {
+        height: 100%;
+      }
+    }
+    .is-horizontal {
+      display: none;
+    }
     a {
       display: inline-block;
       width: 100%;
+      overflow: hidden;
     }
     .svg-icon {
       margin-right: 16px;
     }
     .el-menu {
       border: none;
+      height: 100%;
       width: 100% !important;
     }
   }
-
   .hideSidebar {
     .sidebar-container {
       width: 36px !important;
@@ -50,22 +59,28 @@
       }
     }
     .el-submenu {
+      overflow: hidden;
       &>.el-submenu__title {
         padding-left: 10px !important;
-        &>span {
-          height: 0;
-          width: 0;
-          overflow: hidden;
-          visibility: hidden;
-          display: inline-block;
-        }
         .el-submenu__icon-arrow {
           display: none;
         }
       }
     }
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
   }
-
   .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
   .sidebar-container .el-submenu .el-menu-item {
     min-width: 180px !important;
@@ -84,7 +99,6 @@
       margin-left: 0px;
     }
     .sidebar-container {
-      top: 50px;
       transition: transform .28s;
       width: 180px !important;
     }
@@ -95,7 +109,6 @@
       }
     }
   }
-
   .withoutAnimation {
     .main-container,
     .sidebar-container {
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="app-wrapper" :class="classObj">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
     <sidebar class="sidebar-container"></sidebar>
     <div class="main-container">
       <navbar></navbar>
@@ -36,6 +37,11 @@ export default {
         mobile: this.device === 'mobile'
       }
     }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+    }
   }
 }
 </script>
@@ -48,4 +54,13 @@ export default {
     height: 100%;
     width: 100%;
   }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
 </style>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <scroll-bar>
+  <el-scrollbar wrapClass="scrollbar-wrapper">
     <el-menu
       mode="vertical"
       :show-timeout="200"
@@ -11,16 +11,15 @@
     >
       <sidebar-item :routes="permission_routers"></sidebar-item>
     </el-menu>
-  </scroll-bar>
+  </el-scrollbar>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
-import ScrollBar from '@/components/ScrollBar'
 
 export default {
-  components: { SidebarItem, ScrollBar },
+  components: { SidebarItem },
   computed: {
     ...mapGetters([
       'permission_routers',
