tag修改

layouts/default.vue

@@ -31,11 +31,17 @@
         <!-- 侧边栏结束 -->
         <div class="main_right">
           <div class="crumbs">
-            <div class="y_flex_start">
-              <div class="crumbs_list" v-for="(item, index) in Array.from(visitedViews)" :class="isActive(item)?'crumbs_active':''" @contextmenu.prevent="openMenu(item,$event)">
-                <router-link :to="item.path">{{item.name}}</router-link>
-                <span class="crumbs_close" @click="closeSelectedTag(item)">×</span>
+            <div class="y_flex_start" >
+              <div @click="toleft"><</div>
+              <div style="width: 100%; overflow: hidden;">
+                <div class="y_flex_start crumbs_text">
+                  <div class="crumbs_list" v-for="(item, index) in Array.from(visitedViews)" :class="isActive(item)?'crumbs_active':''" @contextmenu.prevent="openMenu(item,$event)">
+                    <router-link :to="item.path">{{item.name}}</router-link>
+                    <span class="crumbs_close" @click="closeSelectedTag(item)">×</span>
+                  </div>
+                </div>
               </div>
+              <div @click="toright">></div>
             </div>
             <ul v-show="visible" :style="{left:left+'px'}" class="contextmenu">
               <li>刷新</li>
@@ -72,7 +78,9 @@ export default {
       left: 0,
       selectedTag: {},
       leftMenuList: [],
-      isRoute: true
+      isRoute: true,
+      moveLength: 130,
+      moveNum: 0
     }
   },
   computed: {
@@ -186,6 +194,8 @@ export default {
       this.selectedTag = tag
       let clientWidth = document.documentElement.clientWidth * 0.1
       this.left = e.clientX - clientWidth + 40 // 15: margin right
+      console.log(e.clientX)
+      console.log(clientWidth)
     },
     // 关闭其他
     closeOthersTags() {
@@ -280,6 +290,18 @@ export default {
 //      clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
 //    }
       this.clientHeight = document.documentElement.clientHeight - 76
+    },
+    toleft() {
+      if (this.moveNum !== 0) {
+        this.moveNum ++
+        let root = document.getElementsByClassName('crumbs_text')[0]
+        root.style.cssText = 'transform: translateX(' + this.moveLength * this.moveNum + 'px);'
+      }
+    },
+    toright() {
+      this.moveNum --
+      let root = document.getElementsByClassName('crumbs_text')[0]
+      root.style.cssText = 'transform: translateX(' + this.moveLength * this.moveNum + 'px);'
     }
   },
   mounted() {
@@ -389,6 +411,9 @@ export default {
   padding: 5px 23px;
   box-sizing: border-box;
 }
+.crumbs_text{
+  transition: all .2s;
+}
 .crumbs_list{
   background: #FFFFFF;
   border: 1px solid #d8dce5;
@@ -398,6 +423,10 @@ export default {
   line-height: 21px;
   padding: 0 8px;
   margin-right: 15px;
+  width: 130px;
+}
+.crumbs_list a{
+  white-space: nowrap;
 }
 .crumbs_active{
   border: 1px solid #DBE1EC;
@@ -408,6 +437,7 @@ export default {
 }
 .crumbs_close{
   margin-left: 10px;
+  cursor: pointer;
 }
 .crumbs_active .crumbs_close{
   color: #FFFFFF;