feat[tags-view]: tags-view add contextmenu (#343)

* add the menu by right-clicking the tags

* bug fixed

* refine

src/store/modules/tagsView.js

@@ -29,6 +29,25 @@ const tagsView = {
           break
         }
       }
+    },
+    DEL_OTHER_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews = [].concat(state.visitedViews.slice(i, i + 1))
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews = [].concat(state.cachedViews.slice(index, i + 1))
+          break
+        }
+      }
+    },
+    DEL_ALL_VIEWS: (state) => {
+      state.visitedViews = []
+      state.cachedViews = []
     }
   },
   actions: {
@@ -40,6 +59,18 @@ const tagsView = {
         commit('DEL_VISITED_VIEWS', view)
         resolve([...state.visitedViews])
       })
+    },
+    delOtherViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_OTHER_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
+    },
+    delAllViews({ commit, state }) {
+      return new Promise((resolve) => {
+        commit('DEL_ALL_VIEWS')
+        resolve([...state.visitedViews])
+      })
     }
   }
 }

src/views/layout/components/TagsView.vue

 <template>
+  <div class="tag-container">
     <scroll-pane class='tags-view-container' ref='scrollPane'>
-    <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
+      <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
         {{generateTitle(tag.title)}}
         <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
       </router-link>
     </scroll-pane>
+    <ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
+      <li @click="closeViewTags(selectedTag, $event)">关闭</li>
+      <li @click="closeOtherTags">关闭其他</li>
+      <li @click="closeAllTags">关闭所有</li>
+    </ul>
+  </div>
 </template>
 
 <script>
-import ScrollPane from '@/components/ScrollPane'
-import { generateTitle } from '@/utils/i18n'
+  import ScrollPane from '@/components/ScrollPane'
+  import { generateTitle } from '@/utils/i18n'
 
-export default {
+  export default {
     components: { ScrollPane },
+    data() {
+      return {
+        visible: false,
+        top: 0,
+        left: 0,
+        selectedTag: {}
+      }
+    },
     computed: {
       visitedViews() {
         return this.$store.state.tagsView.visitedViews
@@ -36,6 +51,14 @@ export default {
         })
         $event.preventDefault()
       },
+      closeOtherTags() {
+        this.$router.push(this.selectedTag.path)
+        this.$store.dispatch('delOtherViews', this.selectedTag)
+      },
+      closeAllTags() {
+        this.$store.dispatch('delAllViews')
+        this.$router.push('/')
+      },
       generateRoute() {
         if (this.$route.name) {
           return this.$route
@@ -62,19 +85,55 @@ export default {
             }
           }
         })
+      },
+      openMenu(tag, e) {
+        this.visible = true
+        this.selectedTag = tag
+        this.left = e.clientX
+        this.top = e.clientY
+      },
+      closeMenu() {
+        this.visible = false
       }
     },
     watch: {
       $route() {
         this.addViewTags()
         this.moveToCurrentTag()
+      },
+      visible(v) {
+        if (v) {
+          window.addEventListener('click', this.closeMenu, false)
+        } else {
+          window.removeEventListener('click', this.closeMenu, false)
+        }
+      }
     }
   }
-}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.tags-view-container {
+  .tag-container {
+    .contextmenu {
+      margin: 0;
+      background: #fff;
+      z-index: 99999;
+      position: absolute;
+      list-style-type: none;
+      padding-left: 0;
+      border: 1px solid rgba(0, 0, 0, 0.4);
+      font-size: 0.8rem;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
+      li {
+        margin: 0;
+        padding: 0.2rem 1.5rem 0.3rem 0.8rem;
+        &:hover {
+          background: #eee;
+          cursor: default;
+        }
+      }
+    }
+    .tags-view-container {
       background: #fff;
       height: 34px;
       border-bottom: 1px solid #d8dce5;
@@ -110,11 +169,12 @@ export default {
           }
         }
       }
-}
+    }
+  }
 </style>
 
 <style rel="stylesheet/scss" lang="scss">
-.tags-view-container {
+  .tags-view-container {
     .tags-view-item {
       .el-icon-close {
         width: 16px;
@@ -135,5 +195,5 @@ export default {
         }
       }
     }
-}
+  }
 </style>