From e762056e801c1459f98a453ab0a0cf6b7d3d5f04 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 23 Oct 2017 13:45:09 +0800
Subject: [PATCH] refactor: tabsview

---
 src/views/layout/components/TabsView.vue | 74 +++++++++++++++++++++---
 1 file changed, 67 insertions(+), 7 deletions(-)

diff --git a/src/views/layout/components/TabsView.vue b/src/views/layout/components/TabsView.vue
index 7f1eaa9f..3ba62820 100644
--- a/src/views/layout/components/TabsView.vue
+++ b/src/views/layout/components/TabsView.vue
@@ -1,9 +1,8 @@
 <template>
   <div class='tabs-view-container'>
-    <router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
-      <el-tag :closable="true" :type="isActive(tag.path)?'primary':''" @close='closeViewTabs(tag,$event)'>
+    <router-link class="tabs-view-item"  :class="isActive(tag.path)?'active':''"  v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
         {{tag.name}}
-      </el-tag>
+        <span class='el-icon-close' @click='closeViewTabs(tag,$event)'></span>
     </router-link>
   </div>
 </template>
@@ -15,6 +14,9 @@ export default {
       return this.$store.state.app.visitedViews.slice(-6)
     }
   },
+  mounted() {
+    this.$store.dispatch('addVisitedViews', this.generateRoute())
+  },
   methods: {
     closeViewTabs(view, $event) {
       this.$store.dispatch('delVisitedViews', view).then((views) => {
@@ -52,12 +54,70 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .tabs-view-container {
+.tabs-view-container {
+  background: #fff;
+  height: 34px;
+  line-height: 34px;
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+  .tabs-view-item {
     display: inline-block;
-    vertical-align: top;
+    position: relative;
+    height: 32px;
+    line-height: 32px;
+    border: 1px solid #d8dce5;
+    color: #495060;
+    background: #fff;
+    padding: 0 12px;
+    font-size: 12px;
     margin-left: 10px;
-    .tabs-view {
-      margin-left: 10px;
+    &:first-of-type {
+      margin-left: 0px;
+    }
+    &.active {
+      border-bottom: 0px;
+      &::before {
+        content: '';
+        background: #20a0ff;
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        position: relative;
+        margin-right: 2px;
+      }
+    }
+    &:hover {
+      // border-color: #20a0ff;
+      //  color: #20a0ff;
     }
   }
+}
+
+
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+.tabs-view-container {
+  .tabs-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>