添加页签组件的关闭菜单

package.json

 {
   "name": "rym-element-ui",
-  "version": "0.1.63",
+  "version": "0.1.64",
   "description": "任意门组件库",
   "main": "lib/rymUi.common.js",
   "scripts": {

src/components/TagsViews/TagsView.vue

@@ -3,6 +3,7 @@
     <scroll-pane
       class="tags-view-wrapper"
       ref="scrollPane"
+      @contextmenu.prevent.native="openCloseAllMenu"
     >
       <router-link
         ref="tag"
@@ -11,6 +12,7 @@
         v-for="tag in Array.from(visitedViews)"
         :to="tag.path"
         :key="tag.path"
+        @contextmenu.stop.prevent.native="openMenu(tag,$event)"
       >
         <span class="tags-text"> {{ tag.title }} </span>
         <span
@@ -19,15 +21,18 @@
         ></span>
       </router-link>
     </scroll-pane>
-    <!-- <ul
+    <ul
       class="contextmenu"
       v-show="visible"
       :style="{ left: left + 'px', top: top + 'px' }"
     >
-      <li @click="closeSelectedTag(selectedTag)">关闭</li>
-      <li @click="closeOthersTags">关闭其余所有标签</li>
+      <li
+        v-if="selectedTag && selectedTag.path"
+        @click="closeSelectedTag(selectedTag)"
+      >关闭</li>
+      <!-- <li @click="closeOthersTags">关闭其余所有标签</li> -->
       <li @click="closeAllTags">关闭所有标签</li>
-    </ul> -->
+    </ul>
   </div>
 </template>
 
@@ -58,12 +63,24 @@ export default {
       this.addViewTags();
       this.moveToCurrentTag();
     },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu);
+      } else {
+        document.body.removeEventListener('click', this.closeMenu);
+      }
+    },
   },
   mounted() {
     this.addViewTags();
   },
   methods: {
-    ...mapActions(['addVisitedViews', 'delVisitedViews']),
+    ...mapActions([
+      'addVisitedViews',
+      'delVisitedViews',
+      'delOthersViews',
+      'delAllViews',
+    ]),
     generateRoute() {
       if (this.$route.name) {
         return this.$route;
@@ -109,6 +126,31 @@ export default {
         }
       });
     },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag.path);
+      this.delOthersViews(this.selectedTag).then(() => {
+        this.moveToCurrentTag();
+      });
+    },
+    closeAllTags() {
+      this.delAllViews();
+      this.$router.push('/');
+    },
+    openCloseAllMenu(e) {
+      this.selectedTag = {};
+      this.left = e.clientX;
+      this.top = e.clientY;
+      this.visible = true;
+    },
+    openMenu(tag, e) {
+      this.selectedTag = tag;
+      this.left = e.clientX;
+      this.top = e.clientY;
+      this.visible = true;
+    },
+    closeMenu() {
+      this.visible = false;
+    },
   },
 };
 </script>