当tags-view滚动关闭右键菜单

@@ -31,7 +31,7 @@
 .fixed-width {
 .fixed-width {
   .el-button--mini {
   .el-button--mini {
     padding: 7px 10px;
     padding: 7px 10px;
-    width: 60px;
+    min-width: 60px;
   }
   }
 }
 }
 
 

@@ -19,12 +19,21 @@ export default {
       return this.$refs.scrollContainer.$refs.wrap
       return this.$refs.scrollContainer.$refs.wrap
     }
     }
   },
   },
+  mounted() {
+    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+  },
+  beforeDestroy() {
+    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+  },
   methods: {
   methods: {
     handleScroll(e) {
     handleScroll(e) {
       const eventDelta = e.wheelDelta || -e.deltaY * 40
       const eventDelta = e.wheelDelta || -e.deltaY * 40
       const $scrollWrapper = this.scrollWrapper
       const $scrollWrapper = this.scrollWrapper
       $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
       $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
     },
     },
+    emitScroll() {
+      this.$emit('scroll')
+    },
     moveToTarget(currentTag) {
     moveToTarget(currentTag) {
       const $container = this.$refs.scrollContainer.$el
       const $container = this.$refs.scrollContainer.$el
       const $containerWidth = $container.offsetWidth
       const $containerWidth = $container.offsetWidth

 <template>
 <template>
   <div id="tags-view-container" class="tags-view-container">
   <div id="tags-view-container" class="tags-view-container">
-        <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
       <router-link
         v-for="tag in visitedViews"
         v-for="tag in visitedViews"
         ref="tag"
         ref="tag"
@@ -14,11 +14,7 @@
         @contextmenu.prevent.native="openMenu(tag,$event)"
         @contextmenu.prevent.native="openMenu(tag,$event)"
       >
       >
         {{ tag.title }}
         {{ tag.title }}
-                <span
-                    v-if="!isAffix(tag)"
-                    class="el-icon-close"
-                    @click.prevent.stop="closeSelectedTag(tag)"
-                />
+        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
       </router-link>
     </scroll-pane>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
@@ -31,8 +27,8 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import ScrollPane from "./ScrollPane";
-import path from "path";
+import ScrollPane from './ScrollPane'
+import path from 'path'
 
 
 export default {
 export default {
   components: { ScrollPane },
   components: { ScrollPane },
@@ -43,14 +39,14 @@ export default {
       left: 0,
       left: 0,
       selectedTag: {},
       selectedTag: {},
       affixTags: []
       affixTags: []
-        };
+    }
   },
   },
   computed: {
   computed: {
     visitedViews() {
     visitedViews() {
-            return this.$store.state.tagsView.visitedViews;
+      return this.$store.state.tagsView.visitedViews
     },
     },
     routes() {
     routes() {
-            return this.$store.state.permission.routes;
+      return this.$store.state.permission.routes
     },
     },
     theme() {
     theme() {
       return this.$store.state.settings.theme;
       return this.$store.state.settings.theme;
@@ -58,24 +54,24 @@ export default {
   },
   },
   watch: {
   watch: {
     $route() {
     $route() {
-            this.addTags();
-            this.moveToCurrentTag();
+      this.addTags()
+      this.moveToCurrentTag()
     },
     },
     visible(value) {
     visible(value) {
       if (value) {
       if (value) {
-                document.body.addEventListener("click", this.closeMenu);
+        document.body.addEventListener('click', this.closeMenu)
       } else {
       } else {
-                document.body.removeEventListener("click", this.closeMenu);
+        document.body.removeEventListener('click', this.closeMenu)
       }
       }
     }
     }
   },
   },
   mounted() {
   mounted() {
-        this.initTags();
-        this.addTags();
+    this.initTags()
+    this.addTags()
   },
   },
   methods: {
   methods: {
     isActive(route) {
     isActive(route) {
-            return route.path === this.$route.path;
+      return route.path === this.$route.path
     },
     },
     activeStyle(tag) {
     activeStyle(tag) {
       if (!this.isActive(tag)) return {};
       if (!this.isActive(tag)) return {};
@@ -85,142 +81,131 @@ export default {
       };
       };
     },
     },
     isAffix(tag) {
     isAffix(tag) {
-            return tag.meta && tag.meta.affix;
+      return tag.meta && tag.meta.affix
     },
     },
-        filterAffixTags(routes, basePath = "/") {
-            let tags = [];
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
       routes.forEach(route => {
       routes.forEach(route => {
         if (route.meta && route.meta.affix) {
         if (route.meta && route.meta.affix) {
-                    const tagPath = path.resolve(basePath, route.path);
+          const tagPath = path.resolve(basePath, route.path)
           tags.push({
           tags.push({
             fullPath: tagPath,
             fullPath: tagPath,
             path: tagPath,
             path: tagPath,
             name: route.name,
             name: route.name,
             meta: { ...route.meta }
             meta: { ...route.meta }
-                    });
+          })
         }
         }
         if (route.children) {
         if (route.children) {
-                    const tempTags = this.filterAffixTags(
-                        route.children,
-                        route.path
-                    );
+          const tempTags = this.filterAffixTags(route.children, route.path)
           if (tempTags.length >= 1) {
           if (tempTags.length >= 1) {
-                        tags = [...tags, ...tempTags];
+            tags = [...tags, ...tempTags]
           }
           }
         }
         }
-            });
-            return tags;
+      })
+      return tags
     },
     },
     initTags() {
     initTags() {
-            const affixTags = (this.affixTags = this.filterAffixTags(
-                this.routes
-            ));
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
       for (const tag of affixTags) {
       for (const tag of affixTags) {
         // Must have tag name
         // Must have tag name
         if (tag.name) {
         if (tag.name) {
-                    this.$store.dispatch("tagsView/addVisitedView", tag);
+          this.$store.dispatch('tagsView/addVisitedView', tag)
         }
         }
       }
       }
     },
     },
     addTags() {
     addTags() {
-            const { name } = this.$route;
+      const { name } = this.$route
       if (name) {
       if (name) {
-                this.$store.dispatch("tagsView/addView", this.$route);
+        this.$store.dispatch('tagsView/addView', this.$route)
       }
       }
-            return false;
+      return false
     },
     },
     moveToCurrentTag() {
     moveToCurrentTag() {
-            const tags = this.$refs.tag;
+      const tags = this.$refs.tag
       this.$nextTick(() => {
       this.$nextTick(() => {
         for (const tag of tags) {
         for (const tag of tags) {
           if (tag.to.path === this.$route.path) {
           if (tag.to.path === this.$route.path) {
-                        this.$refs.scrollPane.moveToTarget(tag);
+            this.$refs.scrollPane.moveToTarget(tag)
             // when query is different then update
             // when query is different then update
             if (tag.to.fullPath !== this.$route.fullPath) {
             if (tag.to.fullPath !== this.$route.fullPath) {
-                            this.$store.dispatch(
-                                "tagsView/updateVisitedView",
-                                this.$route
-                            );
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
             }
             }
-                        break;
+            break
           }
           }
         }
         }
-            });
+      })
     },
     },
     refreshSelectedTag(view) {
     refreshSelectedTag(view) {
-            this.$store.dispatch("tagsView/delCachedView", view).then(() => {
-                const { fullPath } = view;
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
         this.$nextTick(() => {
         this.$nextTick(() => {
           this.$router.replace({
           this.$router.replace({
-                        path: "/redirect" + fullPath
-                    });
-                });
-            });
+            path: '/redirect' + fullPath
+          })
+        })
+      })
     },
     },
     closeSelectedTag(view) {
     closeSelectedTag(view) {
-            this.$store
-                .dispatch("tagsView/delView", view)
-                .then(({ visitedViews }) => {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
         if (this.isActive(view)) {
         if (this.isActive(view)) {
-                        this.toLastView(visitedViews, view);
+          this.toLastView(visitedViews, view)
         }
         }
-                });
+      })
     },
     },
     closeOthersTags() {
     closeOthersTags() {
-            this.$router.push(this.selectedTag);
-            this.$store
-                .dispatch("tagsView/delOthersViews", this.selectedTag)
-                .then(() => {
-                    this.moveToCurrentTag();
-                });
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
     },
     },
     closeAllTags(view) {
     closeAllTags(view) {
-            this.$store
-                .dispatch("tagsView/delAllViews")
-                .then(({ visitedViews }) => {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
         if (this.affixTags.some(tag => tag.path === view.path)) {
         if (this.affixTags.some(tag => tag.path === view.path)) {
-                        return;
+          return
         }
         }
-                    this.toLastView(visitedViews, view);
-                });
+        this.toLastView(visitedViews, view)
+      })
     },
     },
     toLastView(visitedViews, view) {
     toLastView(visitedViews, view) {
-            const latestView = visitedViews.slice(-1)[0];
+      const latestView = visitedViews.slice(-1)[0]
       if (latestView) {
       if (latestView) {
-                this.$router.push(latestView.fullPath);
+        this.$router.push(latestView.fullPath)
       } else {
       } else {
         // now the default is to redirect to the home page if there is no tags-view,
         // now the default is to redirect to the home page if there is no tags-view,
         // you can adjust it according to your needs.
         // you can adjust it according to your needs.
-                if (view.name === "Dashboard") {
+        if (view.name === 'Dashboard') {
           // to reload home page
           // to reload home page
-                    this.$router.replace({ path: "/redirect" + view.fullPath });
+          this.$router.replace({ path: '/redirect' + view.fullPath })
         } else {
         } else {
-                    this.$router.push("/");
+          this.$router.push('/')
         }
         }
       }
       }
     },
     },
     openMenu(tag, e) {
     openMenu(tag, e) {
-            const menuMinWidth = 105;
-            const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
-            const offsetWidth = this.$el.offsetWidth; // container width
-            const maxLeft = offsetWidth - menuMinWidth; // left boundary
-            const left = e.clientX - offsetLeft + 15; // 15: margin right
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
 
 
       if (left > maxLeft) {
       if (left > maxLeft) {
-                this.left = maxLeft;
+        this.left = maxLeft
       } else {
       } else {
-                this.left = left;
+        this.left = left
       }
       }
 
 
-            this.top = e.clientY;
-            this.visible = true;
-            this.selectedTag = tag;
+      this.top = e.clientY
+      this.visible = true
+      this.selectedTag = tag
     },
     },
     closeMenu() {
     closeMenu() {
-            this.visible = false;
+      this.visible = false
+    },
+    handleScroll() {
+      this.closeMenu()
     }
     }
   }
   }
-};
+}
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
@@ -229,7 +214,7 @@ export default {
   width: 100%;
   width: 100%;
   background: #fff;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
   border-bottom: 1px solid #d8dce5;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  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-wrapper {
     .tags-view-item {
     .tags-view-item {
       display: inline-block;
       display: inline-block;
@@ -255,7 +240,7 @@ export default {
         color: #fff;
         color: #fff;
         border-color: #42b983;
         border-color: #42b983;
         &::before {
         &::before {
-                    content: "";
+          content: '';
           background: #fff;
           background: #fff;
           display: inline-block;
           display: inline-block;
           width: 8px;
           width: 8px;
@@ -278,7 +263,7 @@ export default {
     font-size: 12px;
     font-size: 12px;
     font-weight: 400;
     font-weight: 400;
     color: #333;
     color: #333;
-        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
     li {
     li {
       margin: 0;
       margin: 0;
       padding: 7px 16px;
       padding: 7px 16px;
@@ -301,10 +286,10 @@ export default {
       vertical-align: 2px;
       vertical-align: 2px;
       border-radius: 50%;
       border-radius: 50%;
       text-align: center;
       text-align: center;
-            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
       transform-origin: 100% 50%;
       transform-origin: 100% 50%;
       &:before {
       &:before {
-                transform: scale(0.6);
+        transform: scale(.6);
         display: inline-block;
         display: inline-block;
         vertical-align: -3px;
         vertical-align: -3px;
       }
       }