From f01a1ad7b70c2cc6f153a04972fbe1c4f7d93f2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Mon, 7 May 2018 14:53:03 +0800
Subject: [PATCH] refactor[ScrollBar]: use el-scrollbar (#90)

---
 src/components/ScrollBar/index.vue            | 57 -------------------
 src/store/modules/app.js                      |  1 +
 src/styles/index.scss                         | 21 ++++++-
 src/styles/sidebar.scss                       | 49 ++++++++++------
 src/views/layout/Layout.vue                   | 15 +++++
 src/views/layout/components/Sidebar/index.vue |  7 +--
 6 files changed, 70 insertions(+), 80 deletions(-)
 delete mode 100644 src/components/ScrollBar/index.vue

diff --git a/src/components/ScrollBar/index.vue b/src/components/ScrollBar/index.vue
deleted file mode 100644
index dc32f5c..0000000
--- a/src/components/ScrollBar/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
-    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-const delta = 15
-
-export default {
-  name: 'scrollBar',
-  data() {
-    return {
-      top: 0
-    }
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 3
-      const $container = this.$refs.scrollContainer
-      const $containerHeight = $container.offsetHeight
-      const $wrapper = this.$refs.scrollWrapper
-      const $wrapperHeight = $wrapper.offsetHeight
-      if (eventDelta > 0) {
-        this.top = Math.min(0, this.top + eventDelta)
-      } else {
-        if ($containerHeight - delta < $wrapperHeight) {
-          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
-            this.top = this.top
-          } else {
-            this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
-          }
-        } else {
-          this.top = 0
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import '../../styles/variables.scss';
-
-.scroll-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: $menuBg;
-  .scroll-wrapper {
-    position: absolute;
-     width: 100%!important;
-  }
-}
-</style>
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index fca558f..f487241 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -16,6 +16,7 @@ const app = {
         Cookies.set('sidebarStatus', 0)
       }
       state.sidebar.opened = !state.sidebar.opened
+      state.sidebar.withoutAnimation = false
     },
     CLOSE_SIDEBAR: (state, withoutAnimation) => {
       Cookies.set('sidebarStatus', 1)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7ab8db8..d395d84 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -5,25 +5,44 @@
 @import './sidebar.scss';
 
 body {
+  height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
+label {
+  font-weight: 700;
+}
+
 html {
+  height: 100%;
   box-sizing: border-box;
 }
 
+#app{
+  height: 100%;
+}
+
 *,
 *:before,
 *:after {
   box-sizing: inherit;
 }
 
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  outline: none;
+  text-decoration: none;
+}
+
 div:focus{
   outline: none;
-}
+ }
 
 a:focus,
 a:active {
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index d69c434..26cece0 100644
--- 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
index 369b902..c2c906e 100644
--- 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>
@@ -34,6 +35,11 @@ export default {
         mobile: this.device === 'mobile'
       }
     }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+    }
   }
 }
 </script>
@@ -46,4 +52,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
index c4bd38f..ed2948b 100644
--- 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="routes"></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([
       'sidebar'