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

 <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" @contextmenu.prevent.native="openMenu(tag,$event)">
+  <div class="tags-view-container">
+    <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)">
         {{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="closeOtherTags">关闭其他</li>
-      <li @click="closeAllTags">关闭所有</li>
+      <li @click="closeSelectedTag(selectedTag)">Close</li>
+      <li @click="closeOthersTags">Close Others</li>
+      <li @click="closeAllTags">Close All</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 {
-    components: { ScrollPane },
-    data() {
-      return {
-        visible: false,
-        top: 0,
-        left: 0,
-        selectedTag: {}
-      }
+export default {
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {}
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    }
+  },
+  watch: {
+    $route() {
+      this.addViewTags()
+      this.moveToCurrentTag()
     },
-    computed: {
-      visitedViews() {
-        return this.$store.state.tagsView.visitedViews
+    visible(value) {
+      if (value) {
+        window.addEventListener('click', this.closeMenu)
+      } else {
+        window.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.addViewTags()
+  },
+  methods: {
+    generateTitle, // generateTitle by vue-i18n
+    generateRoute() {
+      if (this.$route.name) {
+        return this.$route
       }
+      return false
     },
-    mounted() {
-      this.addViewTags()
+    isActive(route) {
+      return route.path === this.$route.path || route.name === this.$route.name
     },
-    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
-        }
+    addViewTags() {
+      const route = this.generateRoute()
+      if (!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
       }
+      this.$store.dispatch('addVisitedViews', route)
     },
-    watch: {
-      $route() {
-        this.addViewTags()
-        this.moveToCurrentTag()
-      },
-      visible(v) {
-        if (v) {
-          window.addEventListener('click', this.closeMenu, false)
-        } else {
-          window.removeEventListener('click', this.closeMenu, false)
+    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
+          }
         }
-      }
+      })
+    },
+    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
+      this.left = e.clientX
+      this.top = e.clientY
+    },
+    closeMenu() {
+      this.visible = false
     }
   }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .tag-container {
-    .contextmenu {
-      margin: 0;
+.tags-view-container {
+  .tags-view-wrapper {
+    background: #fff;
+    height: 34px;
+    border-bottom: 1px solid #d8dce5;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid #d8dce5;
+      color: #495060;
       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;
+      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;
         }
       }
     }
-    .tags-view-container {
-      background: #fff;
-      height: 34px;
-      border-bottom: 1px solid #d8dce5;
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-      .tags-view-item {
-        display: inline-block;
-        position: relative;
-        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;
-          }
-        }
+  }
+  .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 {
-    .tags-view-item {
-      .el-icon-close {
-        width: 16px;
-        height: 16px;
-        vertical-align: 2px;
-        border-radius: 50%;
-        text-align: center;
-        transition: all .3s cubic-bezier(.645, .045, .355, 1);
-        transform-origin: 100% 50%;
-        &:before {
-          transform: scale(.6);
-          display: inline-block;
-          vertical-align: -3px;
-        }
-        &:hover {
-          background-color: #b4bccc;
-          color: #fff;
-        }
+//reset element css of el-icon-close
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transform-origin: 100% 50%;
+      &:before {
+        transform: scale(.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+      &:hover {
+        background-color: #b4bccc;
+        color: #fff;
       }
     }
   }
+}
 </style>