Improvement - ScrollPanel should not contain any tags-view logic

- Use global el-scrollbar instead of ScrollPanel

src/components/ScrollPane/index.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
 export default {
   name: 'ScrollPane',
   data() {
@@ -19,43 +17,6 @@ export default {
       const eventDelta = e.wheelDelta || -e.deltaY * 40
       const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
       $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
-      const tagList = this.$parent.$refs.tag
-
-      let firstTag = null
-      let lastTag = null
-
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
-
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
-      }
     }
   }
 }

src/views/layout/components/TagsView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+    <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container tags-view-wrapper" @wheel.native.prevent="handleScroll">
       <router-link
         v-for="tag in visitedViews"
         ref="tag"
@@ -14,7 +14,7 @@
         {{ generateTitle(tag.title) }}
         <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
-    </scroll-pane>
+    </el-scrollbar>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
       <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">{{
@@ -26,12 +26,10 @@
 </template>
 
 <script>
-import ScrollPane from '@/components/ScrollPane'
 import { generateTitle } from '@/utils/i18n'
 import path from 'path'
-
+const tagAndTagSpacing = 4 // tagAndTagSpacing
 export default {
-  components: { ScrollPane },
   data() {
     return {
       visible: false,
@@ -113,7 +111,34 @@ export default {
       this.$nextTick(() => {
         for (const tag of tags) {
           if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
+            const $container = this.$refs.scrollContainer.$el
+            const $containerWidth = $container.offsetWidth
+            const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
+
+            const firstTag = tags[0]
+            const lastTag = tags[tags.length - 1]
+
+            if (firstTag === tag) { // Current tag is the first one
+              $scrollWrapper.scrollLeft = 0
+            } else if (lastTag === tag) { // Current tag is the last one
+              $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+            } else {
+              // find preTag and nextTag
+              const currentIndex = tags.findIndex(item => item === tag)
+              const prevTag = tags[currentIndex - 1]
+              const nextTag = tags[currentIndex + 1]
+              // the tag's offsetLeft after of nextTag
+              const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+              // the tag's offsetLeft before of prevTag
+              const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+              if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+                $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+              } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+                $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+              }
+            }
 
             // when query is different then update
             if (tag.to.fullPath !== this.$route.fullPath) {
@@ -184,6 +209,10 @@ export default {
     },
     closeMenu() {
       this.visible = false
+    },
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      this.$refs.scrollContainer.$refs.wrap.scrollLeft = this.$refs.scrollContainer.$refs.wrap.scrollLeft + eventDelta / 4
     }
   }
 }
@@ -196,6 +225,20 @@ export default {
   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);
+  .scroll-container {
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    /deep/ {
+      .el-scrollbar__bar {
+        bottom: 0px;
+      }
+      .el-scrollbar__wrap {
+        height: 49px;
+      }
+    }
+  }
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;