From 7e1ba16d12b03cc318b123ffc8fa2b0eec5d75bf Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 6 Nov 2017 16:02:13 +0800
Subject: [PATCH] refactor:add scroll-bar to sidebar

---
 src/components/ScrollBar/index.vue      | 54 +++++++++++++++++++++++++
 src/components/ScrollPane/index.vue     |  1 -
 src/styles/sidebar.scss                 |  9 ++---
 src/views/layout/components/Navbar.vue  |  5 ++-
 src/views/layout/components/Sidebar.vue | 13 ++++--
 5 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 src/components/ScrollBar/index.vue

diff --git a/src/components/ScrollBar/index.vue b/src/components/ScrollBar/index.vue
new file mode 100644
index 00000000..8ef203be
--- /dev/null
+++ b/src/components/ScrollBar/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class='scroll-container' ref='scrollContainer' @mousewheel="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) {
+      e.preventDefault()
+      const $container = this.$refs.scrollContainer
+      const $containerHeight = $container.offsetHeight
+      const $wrapper = this.$refs.scrollWrapper
+      const $wrapperHeight = $wrapper.offsetHeight
+      if (e.wheelDelta > 0) {
+        this.top = Math.min(0, this.top + e.wheelDelta)
+      } else {
+        if ($containerHeight - delta < $wrapperHeight) {
+          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
+            this.top = this.top
+          } else {
+            this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
+          }
+        } else {
+          this.top = 0
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.scroll-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #545c64;
+  .scroll-wrapper {
+    position: absolute;
+     width: 100%;
+  }
+}
+</style>
diff --git a/src/components/ScrollPane/index.vue b/src/components/ScrollPane/index.vue
index 667082a7..dc74400d 100644
--- a/src/components/ScrollPane/index.vue
+++ b/src/components/ScrollPane/index.vue
@@ -21,7 +21,6 @@ export default {
       const $containerWidth = $container.offsetWidth
       const $wrapper = this.$refs.scrollWrapper
       const $wrapperWidth = $wrapper.offsetWidth
-      console.log($containerWidth, $wrapperWidth)
       if (e.wheelDelta > 0) {
         this.left = Math.min(0, this.left + e.wheelDelta)
       } else {
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index eeb56142..1a854828 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -14,10 +14,6 @@
     bottom: 0;
     left: 0;
     z-index: 1001;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-      display: none
-    }
     a {
       display: inline-block;
       width: 100%;
@@ -27,12 +23,13 @@
     }
     .el-menu {
       border: none;
+      width: 100%;
     }
   }
   .hideSidebar {
-    .sidebar-container {
+    .sidebar-container,.sidebar-container .el-menu {
       width: 36px!important;
-      overflow: inherit;
+      // overflow: inherit;
     }
     .main-container {
       margin-left: 36px;
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index ee6d5c6a..33b3c18d 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -2,7 +2,7 @@
   <el-menu class="navbar" mode="horizontal">
     <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
 
-    <levelbar></levelbar>
+    <levelbar class="levelbar-container"></levelbar>
 
     <div class="right-menu">
 
@@ -111,6 +111,9 @@ export default {
     float: left;
     padding: 0 10px;
   }
+  .levelbar-container{
+    float: left;
+  }
   .errLog-container {
     display: inline-block;
     vertical-align: top;
diff --git a/src/views/layout/components/Sidebar.vue b/src/views/layout/components/Sidebar.vue
index 301a86ee..a8028d0d 100644
--- a/src/views/layout/components/Sidebar.vue
+++ b/src/views/layout/components/Sidebar.vue
@@ -1,14 +1,19 @@
 <template>
-  <el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
-    <sidebar-item :routes='permission_routers'></sidebar-item>
-  </el-menu>
+  <scroll-bar>
+    <el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#545c64" text-color="#fff"
+      active-text-color="#ffd04b">
+      <sidebar-item :routes='permission_routers'></sidebar-item>
+    </el-menu>
+  </scroll-bar>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
+import ScrollBar from '@/components/ScrollBar'
+
 export default {
-  components: { SidebarItem },
+  components: { SidebarItem, ScrollBar },
   computed: {
     ...mapGetters([
       'permission_routers',