refactor[tagsView]: use el-scrollbar (#995)

src/components/ScrollPane/index.vue

@@ -1,9 +1,7 @@
 <template>
-  <div ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll">
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <div ref="scrollWrapper" :style="{left: left + 'px'}" class="scroll-wrapper">
     <slot/>
-    </div>
+  </el-scrollbar>
-  </div>
 </template>
 
 <script>
@@ -18,41 +16,22 @@ export default {
   },
   methods: {
     handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 3
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $container = this.$refs.scrollContainer
+      const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
-      const $containerWidth = $container.offsetWidth
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-      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
-        }
-      }
     },
     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 > $containerWidth) {
-      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 {
         // 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 {
+  /deep/ {
-    position: absolute;
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
   }
 }
 </style>

src/views/layout/components/TagsView.vue

@@ -123,11 +123,12 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .tags-view-container {
-  .tags-view-wrapper {
-    background: #fff;
   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 {
     .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;