From 0f9774f5cfa2a776f25ced357292975371dd00d5 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 22 Aug 2018 14:39:28 +0800
Subject: [PATCH] perf tagsview

---
 src/components/ScrollPane/index.vue      | 57 +++++++++---------------
 src/views/layout/components/TagsView.vue |  9 ++--
 2 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/src/components/ScrollPane/index.vue b/src/components/ScrollPane/index.vue
index fa90bbe0..33ce4a80 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,23 @@ 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
+      console.log(eventDelta)
+      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 +45,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..f836285c 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;