From 52e1afa2f246f4a003c0c31a8b226809cde5ac67 Mon Sep 17 00:00:00 2001
From: "lei.jiang" <jianglei19940909@126.com>
Date: Fri, 1 Dec 2017 11:13:55 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=A2=9E=E5=8A=A0=E5=8F=B3=E9=94=AEtag?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=85=B3=E9=97=AD=E9=80=89=E9=A1=B9=E7=9A=84?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=202.=E5=A2=9E=E5=8A=A0tagview=E7=9A=84?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ScrollPane/index.vue      |  86 +++++++++++++----
 src/views/layout/components/TagsView.vue | 115 ++++++++++++-----------
 2 files changed, 128 insertions(+), 73 deletions(-)

diff --git a/src/components/ScrollPane/index.vue b/src/components/ScrollPane/index.vue
index ea13176d..1f633658 100644
--- a/src/components/ScrollPane/index.vue
+++ b/src/components/ScrollPane/index.vue
@@ -3,6 +3,10 @@
     <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
       <slot></slot>
     </div>
+    <div class="bar-container" v-show="isOverflow" ref="scrollbarContainer">
+      <div class="scrollbar" ref="scrollbar">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,41 +15,83 @@ export default {
   name: 'scrollPane',
   data() {
     return {
-      left: 0
+      left: 0,
+      isOverflow: false,
+      container: undefined,
+      containerWidth: undefined,
+      wrapper: undefined,
+      wrapperWidth: undefined,
+      scrollbarContainer: undefined,
+      scrollbarContainerWidth: undefined,
+      scrollbar: undefined,
+      scrollbarWidth: undefined
     }
   },
+  mounted() {
+    this.container = this.$refs.scrollContainer
+    this.wrapper = this.$refs.scrollWrapper
+    this.scrollbarContainer = this.$refs.scrollbarContainer
+    this.scrollbar = this.$refs.scrollbar
+    this.calcSize()
+    window.addEventListener('resize', () => {
+      this.$forceUpdate()
+      this.calcSize()
+    }, false)
+  },
   methods: {
+    calcPos() {
+      if (this.isOverflow) {
+        this.scrollbar.style.left = -(this.scrollbarContainerWidth - this.scrollbarWidth) * this.left / (this.wrapperWidth - this.containerWidth + 100) + 'px'
+      }
+    },
+    calcSize() {
+      // 计算滚动条的长度
+      this.containerWidth = parseFloat(this.container.offsetWidth, 10)
+      this.wrapperWidth = parseFloat(this.wrapper.offsetWidth, 10)
+      this.scrollbarContainerWidth = parseFloat(this.scrollbarContainer.offsetWidth, 10)
+      this.isOverflow = this.wrapperWidth + 100 > this.containerWidth
+      if (!this.isOverflow) return false
+      this.scrollbarWidth = this.scrollbarContainerWidth * this.containerWidth / (this.wrapperWidth + 100)
+      this.scrollbar.style.width = this.scrollbarWidth + 'px'
+      this.calcPos()
+    },
     handleScroll(e) {
       e.preventDefault()
-      const $container = this.$refs.scrollContainer
-      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)) {
-            this.left = this.left
-          } else {
-            this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - 100)
-          }
-        } else {
-          this.left = 0
+        // 滚轮上滑
+        // 可滑动区间[-(this.wrapperWidth-this.containerWidth+100),0]
+        if (this.left >= -(this.wrapperWidth - this.containerWidth + 100)) {
+          this.left = Math.max(this.left + e.wheelDelta, this.containerWidth - this.wrapperWidth - 100)
         }
       }
+      this.calcPos()
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  .scroll-wrapper {
-    position: absolute;
+  .scroll-container {
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    .scroll-wrapper {
+      position: absolute;
+    }
+    .bar-container{
+      position: absolute;
+      top: 30px;
+      width:100%;
+      height: 5px;
+      .scrollbar{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        background: rgba(0,0,0,.8);
+      }
+    }
   }
-}
 </style>
diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
index ec3acdf0..ce62f800 100644
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -1,15 +1,17 @@
 <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" @contextmenu.prevent.native="openMenu(tag,$event)">
+  <div class="tag-container">
+  <scroll-pane class='tags-view-container' ref="pane">
+    <router-link class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)" v-Clickoutside="closeMenu">
       {{$t('route.'+tag.title)}}
       <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
     </router-link>
+  </scroll-pane>
     <ul class='contextmenu' v-show="open" :style="{left:left+'px',top:top+'px'}">
       <li @click="closePage(0,$event)">关闭</li>
       <li @click="closePage(1,$event)">关闭其他</li>
       <li @click="closePage(2,$event)">关闭所有</li>
     </ul>
-  </scroll-pane>
+  </div>
 </template>
 
 <script>
@@ -27,6 +29,7 @@ export default {
   data() {
     return {
       open: false,
+      isOverflow: false,
       top: 0,
       left: 0,
       isSelect: {}
@@ -35,6 +38,9 @@ export default {
   mounted() {
     this.addViewTags()
   },
+  updated() {
+    this.$nextTick(this.$refs.pane.calcSize())
+  },
   methods: {
     closeViewTags(view, $event) {
       this.$store.dispatch('delVisitedViews', view).then((views) => {
@@ -82,8 +88,8 @@ export default {
     openMenu(tag, e) {
       this.open = true
       this.isSelect = tag
-      this.left = e.clientX - document.querySelector('.main-container').offsetLeft
-      this.top = e.clientY - document.querySelector('.tags-view-container').offsetTop
+      this.left = e.clientX
+      this.top = e.clientY
     },
     closeMenu() {
       this.open = false
@@ -98,62 +104,64 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.tags-view-container {
-  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);
-  .contextmenu{
-    margin: 0;
-    background: #fff;
-    z-index: 99999;
-    position:absolute;
-    list-style-type: none;
-    padding-left: 0;
-    border: 1px solid rgba(0,0,0,0.4);
-    font-size: 0.8rem;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
-    li{
+  .tag-container {
+    .contextmenu {
       margin: 0;
-      padding: 0.2rem 1.5rem 0.3rem 0.8rem;
-      &:hover{
-        background: #eee;
-        cursor: default;
+      background: #fff;
+      z-index: 99999;
+      position: absolute;
+      list-style-type: none;
+      padding-left: 0;
+      border: 1px solid rgba(0, 0, 0, 0.4);
+      font-size: 0.8rem;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
+      li {
+        margin: 0;
+        padding: 0.2rem 1.5rem 0.3rem 0.8rem;
+        &:hover {
+          background: #eee;
+          cursor: default;
+        }
       }
     }
-  }
-  .tags-view-item {
-    display: inline-block;
-    position: relative;
-    height: 26px;
-    line-height: 26px;
-    border: 1px solid #d8dce5;
-    color: #495060;
-    background: #fff;
-    padding: 0 8px;
-    font-size: 12px;
-    margin-left: 5px;
-    margin-top: 4px;
-    &:first-of-type {
-      margin-left: 15px;
-    }
-    &.active {
-      background-color: #42b983;
-      color: #fff;
-      border-color: #42b983;
-      &::before {
-        content: '';
-        background: #fff;
+    .tags-view-container {
+      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;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
         position: relative;
-        margin-right: 2px;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 15px;
+        }
+        &.active {
+          background-color: #42b983;
+          color: #fff;
+          border-color: #42b983;
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
       }
     }
   }
-}
 </style>
 
 <style rel="stylesheet/scss" lang="scss">
@@ -179,4 +187,5 @@ export default {
     }
   }
 }
+
 </style>