perf[tags-view]:refine the style && format code

src/store/modules/tagsView.js

@@ -30,17 +30,17 @@ const tagsView = {
         }
       }
     },
-    DEL_OTHER_VIEWS: (state, view) => {
+    DEL_OTHERS_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))
+          state.visitedViews = 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))
+          state.cachedViews = state.cachedViews.slice(index, i + 1)
           break
         }
       }
@@ -60,9 +60,9 @@ const tagsView = {
         resolve([...state.visitedViews])
       })
     },
-    delOtherViews({ commit, state }, view) {
+    delOthersViews({ commit, state }, view) {
       return new Promise((resolve) => {
-        commit('DEL_OTHER_VIEWS', view)
+        commit('DEL_OTHERS_VIEWS', view)
         resolve([...state.visitedViews])
       })
     },

src/views/layout/components/TagsView.vue

@@ -1,24 +1,24 @@
 <template>
-  <div class="tag-container">
+  <div class="tags-view-container">
-    <scroll-pane class='tags-view-container' ref='scrollPane'>
+    <scroll-pane class='tags-view-wrapper' 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" @contextmenu.prevent.native="openMenu(tag,$event)">
+      <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>
+        <span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></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="closeSelectedTag(selectedTag)">Close</li>
-      <li @click="closeOtherTags">关闭其他</li>
+      <li @click="closeOthersTags">Close Others</li>
-      <li @click="closeAllTags">关闭所有</li>
+      <li @click="closeAllTags">Close All</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 },
   data() {
     return {
@@ -33,38 +33,33 @@
       return this.$store.state.tagsView.visitedViews
     }
   },
+  watch: {
+    $route() {
+      this.addViewTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        window.addEventListener('click', this.closeMenu)
+      } else {
+        window.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
   mounted() {
     this.addViewTags()
   },
   methods: {
-      generateTitle,
+    generateTitle, // generateTitle by vue-i18n
-      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
     },
+    isActive(route) {
+      return route.path === this.$route.path || route.name === this.$route.name
+    },
     addViewTags() {
       const route = this.generateRoute()
       if (!route) {
@@ -72,9 +67,6 @@
       }
       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(() => {
@@ -86,6 +78,26 @@
         }
       })
     },
+    closeSelectedTag(view) {
+      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('/')
+          }
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag.path)
+      this.$store.dispatch('delOthersViews', this.selectedTag)
+    },
+    closeAllTags() {
+      this.$store.dispatch('delAllViews')
+      this.$router.push('/')
+    },
     openMenu(tag, e) {
       this.visible = true
       this.selectedTag = tag
@@ -95,45 +107,13 @@
     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>
-  .tag-container {
+.tags-view-container {
-    .contextmenu {
+  .tags-view-wrapper {
-      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;
@@ -170,11 +150,33 @@
       }
     }
   }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 2;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
       }
+    }
+  }
+}
 </style>
 
 <style rel="stylesheet/scss" lang="scss">
-  .tags-view-container {
+//reset element css of el-icon-close
+.tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {
       width: 16px;
@@ -195,5 +197,5 @@
       }
     }
   }
-  }
+}
 </style>