diff --git a/package.json b/package.json
index aef30525..98623791 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "sortablejs": "1.7.0",
     "tui-editor": "1.2.7",
     "vue": "2.5.17",
+    "vue-clickaway": "^2.2.2",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.2",
diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
index c16827b6..b846e4a0 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() {