From de34b2c4504ab43bbf9c7f88ea39297303bde475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=96=E4=BC=8D=E9=99=88=E6=B5=B7=E5=A4=A9?=
 <mail@95jw.cn>
Date: Thu, 6 Sep 2018 18:30:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9tags=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8F=AF=E8=83=BD=E6=9C=89=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/layout/components/TagsView.vue | 175 ++++++++++++-----------
 1 file changed, 88 insertions(+), 87 deletions(-)

diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
index 2bb83b41..3ba1382f 100644
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -89,9 +89,10 @@ export default {
     refreshSelectedTag(view) {
       this.$store.dispatch('delCachedView', view).then(() => {
         const { fullPath } = view
-
-        this.$router.replace({
-          path: '/redirect' + fullPath
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
         })
       })
     },
@@ -132,94 +133,94 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.tags-view-container {
-  height: 34px;
-  width: 100%;
-  background: #fff;
-  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-wrapper {
-    .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;
-      }
-      &:last-of-type {
-        margin-right: 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 {
+        height: 34px;
+        width: 100%;
+        background: #fff;
+        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-wrapper {
+            .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;
+                }
+                &:last-of-type {
+                    margin-right: 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: 100;
+            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;
+                }
+            }
         }
-      }
     }
-  }
-  .contextmenu {
-    margin: 0;
-    background: #fff;
-    z-index: 100;
-    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">
-//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;
-      }
+    //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>