add(tags-view): moveToCurrentTag

Author: PanJiaChen

src/components/ScrollPane/index.vue

@@ -7,6 +7,8 @@
 </template>
 
 <script>
+const padding = 15 // tag's padding
+
 export default {
   name: 'scrollPane',
   data() {
@@ -21,19 +23,37 @@ export default {
       const $containerWidth = $container.offsetWidth
       const $wrapper = this.$refs.scrollWrapper
       const $wrapperWidth = $wrapper.offsetWidth
+
       if (e.wheelDelta > 0) {
         this.left = Math.min(0, this.left + e.wheelDelta)
       } else {
-        if ($containerWidth - 100 < $wrapperWidth) {
-          if (this.left < -($wrapperWidth - $containerWidth + 100)) {
+        if ($containerWidth - padding < $wrapperWidth) {
+          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
             this.left = this.left
           } else {
-            this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - 100)
+            this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - padding)
           }
         } else {
           this.left = 0
         }
       }
+    },
+    moveToTarget($target) {
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      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 {
+        // tag in the right
+        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
+      }
     }
   }
 }

src/views/layout/components/TagsView.vue

@@ -1,6 +1,6 @@
 <template>
-  <scroll-pane class='tags-view-container'>
-    <router-link class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
+  <scroll-pane class='tags-view-container' ref='scrollPane'>
+    <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
       {{$t('route.'+tag.title)}}
       <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
     </router-link>
@@ -49,12 +49,24 @@ export default {
     },
     isActive(route) {
       return route.path === this.$route.path || route.name === this.$route.name
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag.$el)
+            break
+          }
+        }
+      })
     }
 
   },
   watch: {
     $route() {
       this.addViewTags()
+      this.moveToCurrentTag()
     }
   }
 }