From 258f4b86d2e6f4d19caf4648f81e043a2c93641f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Tue, 5 May 2020 12:53:42 +0800
Subject: [PATCH] perr: refine code

---
 src/layout/components/TagsView/ScrollPane.vue |  9 +++++++++
 src/layout/components/TagsView/index.vue      | 12 ++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 0ec76e72..34a7e55f 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -19,12 +19,21 @@ export default {
       return this.$refs.scrollContainer.$refs.wrap
     }
   },
+  mounted() {
+    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+  },
+  beforeDestroy() {
+    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+  },
   methods: {
     handleScroll(e) {
       const eventDelta = e.wheelDelta || -e.deltaY * 40
       const $scrollWrapper = this.scrollWrapper
       $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
     },
+    emitScroll() {
+      this.$emit('scroll')
+    },
     moveToTarget(currentTag) {
       const $container = this.$refs.scrollContainer.$el
       const $containerWidth = $container.offsetWidth
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 352f98df..d2a56e70 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,6 +1,6 @@
 <template>
   <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
         v-for="tag in visitedViews"
         ref="tag"
@@ -46,9 +46,6 @@ export default {
     },
     routes() {
       return this.$store.state.permission.routes
-    },
-    scrollWrapper() {
-      return this.$refs.scrollPane.$refs.scrollContainer.$refs.wrap
     }
   },
   watch: {
@@ -67,10 +64,6 @@ export default {
   mounted() {
     this.initTags()
     this.addTags()
-    this.scrollWrapper.addEventListener('scroll', this.closeMenu, true)
-  },
-  beforeDestroy() {
-    document.removeEventListener('scroll', this.closeMenu)
   },
   methods: {
     isActive(route) {
@@ -196,6 +189,9 @@ export default {
     },
     closeMenu() {
       this.visible = false
+    },
+    handleScroll() {
+      this.closeMenu()
     }
   }
 }