Merge pull request #1 from HughDai/click-away

perf[TagsView]:use vue-clickaway to close context menu when you click…

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",

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() {