From 68de01e82840ca3aa46a71b6ec3a024e618a604e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Fri, 31 Aug 2018 14:01:07 +0800
Subject: [PATCH] refactor[tagsView]: use el-scrollbar (#995)

---
 src/components/ScrollPane/index.vue      | 56 +++++++++---------------
 src/views/layout/components/TagsView.vue | 12 +++--
 2 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/src/components/ScrollPane/index.vue b/src/components/ScrollPane/index.vue
index fa90bbe0..d4d75aee 100644
--- a/src/components/ScrollPane/index.vue
+++ b/src/components/ScrollPane/index.vue
@@ -1,9 +1,7 @@
 <template>
-  <div ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll">
-    <div ref="scrollWrapper" :style="{left: left + 'px'}" class="scroll-wrapper">
-      <slot/>
-    </div>
-  </div>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot/>
+  </el-scrollbar>
 </template>
 
 <script>
@@ -18,41 +16,22 @@ export default {
   },
   methods: {
     handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 3
-      const $container = this.$refs.scrollContainer
-      const $containerWidth = $container.offsetWidth
-      const $wrapper = this.$refs.scrollWrapper
-      const $wrapperWidth = $wrapper.offsetWidth
-
-      if (eventDelta > 0) {
-        this.left = Math.min(0, this.left + eventDelta)
-      } else {
-        if ($containerWidth - padding < $wrapperWidth) {
-          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
-            this.left = this.left
-          } else {
-            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
-          }
-        } else {
-          this.left = 0
-        }
-      }
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
     },
     moveToTarget($target) {
-      const $container = this.$refs.scrollContainer
+      const $container = this.$refs.scrollContainer.$el
       const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
       const $targetLeft = $target.offsetLeft
       const $targetWidth = $target.offsetWidth
-
-      if ($targetLeft < -this.left) {
-        // tag in the left
-        this.left = -$targetLeft + padding
-      } else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
-        // tag in the current view
-        // eslint-disable-line
-      } else {
+      if ($targetLeft > $containerWidth) {
         // tag in the right
-        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
+        $scrollWrapper.scrollLeft = $targetLeft - $containerWidth + $targetWidth + padding
+      } else {
+        // tag in the left
+        $scrollWrapper.scrollLeft = $targetLeft - padding
       }
     }
   }
@@ -65,8 +44,13 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  .scroll-wrapper {
-    position: absolute;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
   }
 }
 </style>
diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
index 9e34baff..d3561ebe 100644
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -123,11 +123,12 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .tags-view-container {
+  height: 34px;
+  width: 100%;
+  background: #fff;
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
   .tags-view-wrapper {
-    background: #fff;
-    height: 34px;
-    border-bottom: 1px solid #d8dce5;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
     .tags-view-item {
       display: inline-block;
       position: relative;
@@ -143,6 +144,9 @@ export default {
       &:first-of-type {
         margin-left: 15px;
       }
+      &:last-of-type {
+        margin-right: 15px;
+      }
       &.active {
         background-color: #42b983;
         color: #fff;