Merge pull request #859 from iview/2.0

完成标签导航的滚动到可视区域效果

src/view/main/components/tags-nav/tags-nav.vue

@@ -56,7 +56,9 @@ export default {
   },
   data () {
     return {
-      tagBodyLeft: 0
+      tagBodyLeft: 0,
+      rightOffset: 40,
+      outerPadding: 4
     }
   },
   methods: {
@@ -69,14 +71,16 @@ export default {
       this.handleScroll(delta)
     },
     handleScroll (offset) {
+      const outerWidth = this.$refs.scrollOuter.offsetWidth
+      const bodyWidth = this.$refs.scrollBody.offsetWidth
       if (offset > 0) {
         this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)
       } else {
-        if (this.$refs.scrollOuter.offsetWidth < this.$refs.scrollBody.offsetWidth) {
-          if (this.tagBodyLeft < -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollOuter.offsetWidth)) {
+        if (outerWidth < bodyWidth) {
+          if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
             this.tagBodyLeft = this.tagBodyLeft
           } else {
-            this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, this.$refs.scrollOuter.offsetWidth - this.$refs.scrollBody.offsetWidth)
+            this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth)
           }
         } else {
           this.tagBodyLeft = 0
@@ -103,7 +107,41 @@ export default {
     },
     showTitleInside (item) {
       return showTitle(item, this)
+    },
+    moveToView (tag) {
+      const outerWidth = this.$refs.scrollOuter.offsetWidth
+      if (tag.offsetLeft < -this.tagBodyLeft) {
+        // 标签在可视区域左侧
+        this.tagBodyLeft = -tag.offsetLeft + this.outerPadding
+      } else if (tag.offsetLeft + 0 > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + outerWidth) {
+        // 标签在可视区域
+        // this.tagBodyLeft = Math.min(this.outerPadding, outerWidth - tag.offsetWidth - tag.offsetLeft - this.outerPadding)
+      } else {
+        // 标签在可视区域右侧
+        this.tagBodyLeft = -(tag.offsetLeft - (outerWidth - this.outerPadding - tag.offsetWidth))
+      }
+    },
+    getTagElementByName (name) {
+      this.$nextTick(() => {
+        this.refsTag = this.$refs.tagsPageOpened
+        this.refsTag.forEach((item, index) => {
+          if (name === item.name) {
+            let tag = this.refsTag[index].$el
+            this.moveToView(tag)
+          }
+        })
+      })
     }
+  },
+  watch: {
+    '$route' (to) {
+      this.getTagElementByName(to.name)
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.getTagElementByName(this.$route.name)
+    }, 200)
   }
 }
 </script>