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

@@ -1,139 +1,199 @@
 <template>
-  <scroll-pane class='tags-view-container' ref='scrollPane'>
+  <div class="tag-container">
-    <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">
+    <scroll-pane class='tags-view-container' ref='scrollPane'>
-      {{generateTitle(tag.title)}}
+      <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)">
-      <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
+        {{generateTitle(tag.title)}}
-    </router-link>
+        <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
-  </scroll-pane>
+      </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 ScrollPane from '@/components/ScrollPane'
-import { generateTitle } from '@/utils/i18n'
+  import { generateTitle } from '@/utils/i18n'
 
-export default {
+  export default {
-  components: { ScrollPane },
+    components: { ScrollPane },
-  computed: {
+    data() {
-    visitedViews() {
+      return {
-      return this.$store.state.tagsView.visitedViews
+        visible: false,
-    }
+        top: 0,
-  },
+        left: 0,
-  mounted() {
+        selectedTag: {}
-    this.addViewTags()
-  },
-  methods: {
-    generateTitle,
-    closeViewTags(view, $event) {
-      this.$store.dispatch('delVisitedViews', view).then((views) => {
-        if (this.isActive(view)) {
-          const latestView = views.slice(-1)[0]
-          if (latestView) {
-            this.$router.push(latestView.path)
-          } else {
-            this.$router.push('/')
-          }
-        }
-      })
-      $event.preventDefault()
-    },
-    generateRoute() {
-      if (this.$route.name) {
-        return this.$route
       }
-      return false
     },
-    addViewTags() {
+    computed: {
-      const route = this.generateRoute()
+      visitedViews() {
-      if (!route) {
+        return this.$store.state.tagsView.visitedViews
-        return false
       }
-      this.$store.dispatch('addVisitedViews', route)
     },
-    isActive(route) {
+    mounted() {
-      return route.path === this.$route.path || route.name === this.$route.name
-    },
-    moveToCurrentTag() {
-      const tags = this.$refs.tag
-      this.$nextTick(() => {
-        for (const tag of tags) {
-          if (tag.to === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag.$el)
-            break
-          }
-        }
-      })
-    }
-  },
-  watch: {
-    $route() {
       this.addViewTags()
-      this.moveToCurrentTag()
+    },
+    methods: {
+      generateTitle,
+      closeViewTags(view, $event) {
+        this.$store.dispatch('delVisitedViews', view).then((views) => {
+          if (this.isActive(view)) {
+            const latestView = views.slice(-1)[0]
+            if (latestView) {
+              this.$router.push(latestView.path)
+            } else {
+              this.$router.push('/')
+            }
+          }
+        })
+        $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
+        }
+        return false
+      },
+      addViewTags() {
+        const route = this.generateRoute()
+        if (!route) {
+          return false
+        }
+        this.$store.dispatch('addVisitedViews', route)
+      },
+      isActive(route) {
+        return route.path === this.$route.path || route.name === this.$route.name
+      },
+      moveToCurrentTag() {
+        const tags = this.$refs.tag
+        this.$nextTick(() => {
+          for (const tag of tags) {
+            if (tag.to === this.$route.path) {
+              this.$refs.scrollPane.moveToTarget(tag.$el)
+              break
+            }
+          }
+        })
+      },
+      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 {
-  background: #fff;
+    .contextmenu {
-  height: 34px;
+      margin: 0;
-  border-bottom: 1px solid #d8dce5;
+      background: #fff;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+      z-index: 99999;
-  .tags-view-item {
+      position: absolute;
-    display: inline-block;
+      list-style-type: none;
-    position: relative;
+      padding-left: 0;
-    height: 26px;
+      border: 1px solid rgba(0, 0, 0, 0.4);
-    line-height: 26px;
+      font-size: 0.8rem;
-    border: 1px solid #d8dce5;
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
-    color: #495060;
+      li {
-    background: #fff;
+        margin: 0;
-    padding: 0 8px;
+        padding: 0.2rem 1.5rem 0.3rem 0.8rem;
-    font-size: 12px;
+        &:hover {
-    margin-left: 5px;
+          background: #eee;
-    margin-top: 4px;
+          cursor: default;
-    &:first-of-type {
+        }
-      margin-left: 15px;
+      }
     }
-    &.active {
+    .tags-view-container {
-      background-color: #42b983;
+      background: #fff;
-      color: #fff;
+      height: 34px;
-      border-color: #42b983;
+      border-bottom: 1px solid #d8dce5;
-      &::before {
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-        content: '';
+      .tags-view-item {
-        background: #fff;
         display: inline-block;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
         position: relative;
-        margin-right: 2px;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid #d8dce5;
+        color: #495060;
+        background: #fff;
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+        &:first-of-type {
+          margin-left: 15px;
+        }
+        &.active {
+          background-color: #42b983;
+          color: #fff;
+          border-color: #42b983;
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 2px;
+          }
+        }
       }
     }
   }
-}
 </style>
 
 <style rel="stylesheet/scss" lang="scss">
-.tags-view-container {
+  .tags-view-container {
-  .tags-view-item {
+    .tags-view-item {
-    .el-icon-close {
+      .el-icon-close {
-      width: 16px;
+        width: 16px;
-      height: 16px;
+        height: 16px;
-      vertical-align: 2px;
+        vertical-align: 2px;
-      border-radius: 50%;
+        border-radius: 50%;
-      text-align: center;
+        text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
-      transform-origin: 100% 50%;
+        transform-origin: 100% 50%;
-      &:before {
+        &:before {
-        transform: scale(.6);
+          transform: scale(.6);
-        display: inline-block;
+          display: inline-block;
-        vertical-align: -3px;
+          vertical-align: -3px;
-      }
+        }
-      &:hover {
+        &:hover {
-        background-color: #b4bccc;
+          background-color: #b4bccc;
-        color: #fff;
+          color: #fff;
+        }
       }
     }
   }
-}
 </style>