From c30d798f18e96d57b9063295ac4c9a694160540b Mon Sep 17 00:00:00 2001
From: hughdai <cynicism2011@gmail.com>
Date: Wed, 24 Oct 2018 16:32:34 +0800
Subject: [PATCH] perf[TagsView]:use vue-clickaway to close context menu when
 you click outside of the component, and also make code neat

---
 package.json                             |  1 +
 src/views/layout/components/TagsView.vue | 11 +++--------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 7bbaa960..e8dcdeab 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "simplemde": "1.11.2",
     "sortablejs": "1.7.0",
     "vue": "2.5.17",
+    "vue-clickaway": "^2.2.2",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.1",
diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
index c9413129..dfee7916 100644
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -15,7 +15,7 @@
         <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
     </scroll-pane>
-    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+    <ul v-on-clickaway="closeMenu" v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
       <li @click="closeSelectedTag(selectedTag)">{{ $t('tagsView.close') }}</li>
       <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
@@ -27,9 +27,11 @@
 <script>
 import ScrollPane from '@/components/ScrollPane'
 import { generateTitle } from '@/utils/i18n'
+import { mixin as clickaway } from 'vue-clickaway'
 
 export default {
   components: { ScrollPane },
+  mixins: [clickaway],
   data() {
     return {
       visible: false,
@@ -47,13 +49,6 @@ export default {
     $route() {
       this.addViewTags()
       this.moveToCurrentTag()
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener('click', this.closeMenu)
-      } else {
-        document.body.removeEventListener('click', this.closeMenu)
-      }
     }
   },
   mounted() {