优化多页签

src/layout/components/Breadcrumb.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="__common-layout-pageTabs">
-    <el-scrollbar>
+    <i class="el-icon-caret-left" @click="topScrollClick"></i>
+    <i class="el-icon-caret-right" @click="bottomScrollClick"></i>
+    <div class="mianscroll" ref="mianscroll">
       <div class="__tabs">
-        <div class="__tab-item" v-for="item in openedPageRouters" :class="{'__is-active': item.fullPath == $route.fullPath,}" :key="item.fullPath" @click="onClick(item)" @contextmenu.prevent="showContextMenu($event, item)">
+        <div class="__tab-item" v-for="item in openedPageRouters" :class="{'__is-active': item.fullPath == $route.fullPath,}" :key="item.fullPath" @click="onClick($event,item)" @contextmenu.prevent="showContextMenu($event, item)">
           {{ item.meta.title }}
           <span class="el-icon-close" @click.stop="onClose(item)" @contextmenu.prevent.stop="" :style="openedPageRouters.length <= 1 ? 'width:0;' : ''"></span>
         </div>
       </div>
-    </el-scrollbar>
+    </div>
     <div v-show="contextMenuVisible">
       <ul :style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }" class="__contextmenu">
         <li v-if="contextMenuTargetPageRoute.fullPath == $route.fullPath">
@@ -64,6 +66,21 @@ export default {
     window.removeEventListener("click", this.closeContextMenu);
   },
   methods: {
+    topScrollClick() {
+      this.$nextTick(() => {
+        let scrollWidth = this.$refs.mianscroll.scrollWidth;
+        this.$refs.mianscroll.scrollTo(0,0);
+      });
+    },
+    bottomScrollClick() {
+      this.$nextTick(() => {
+        // let height = this.$refs.mianscroll.clientWidth;
+        let width = this.$refs.mianscroll.getBoundingClientRect().width; // div的宽度
+        let w = this.$refs.mianscroll.scrollWidth; // 可滚动的div宽度
+        let l = w-width; // 可滚动区域宽度
+        this.$refs.mianscroll.scrollTo(l,0);
+      });
+    },
     //打开页面
     openPage(route) {
       this.contextMenuTargetPageRoute = route;
@@ -88,10 +105,11 @@ export default {
         } else {
           this.openedPageRouters.push(route);
         }
+        this.bottomScrollClick();
       }
     },
     //点击页面标签卡时
-    onClick(route) {
+    onClick(e,route) {
       if (route.fullPath !== this.$route.fullPath) {
         this.$router.push(route.fullPath);
       }
@@ -110,8 +128,8 @@ export default {
     //右键显示菜单
     showContextMenu(e, route) {
       this.contextMenuTargetPageRoute = route;
-      this.contextMenuLeft = e.layerX;
-      this.contextMenuTop = e.layerY+10;
+      this.contextMenuLeft = e.clientX;
+      this.contextMenuTop = e.clientY+10;
       this.contextMenuVisible = true;
     },
     //隐藏右键菜单
@@ -217,7 +235,7 @@ export default {
     border: 1px solid #e4e7ed;
     background: #fff;
     z-index: 3000;
-    position: absolute;
+    position: fixed;
     list-style-type: none;
     padding: 5px 0;
     border-radius: 4px;
@@ -239,45 +257,68 @@ export default {
       }
     }
   }
-
+  .mianscroll{
+    width: 100%;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    overflow: -moz-scrollbars-none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  width: 100%;
   $c-tab-border-color: #dcdfe6;
   position: relative;
-  margin: 16px 16px 0 16px;
-
-  &::before {
-    content: "";
-    border-bottom: 1px solid $c-tab-border-color;
+  margin: 10px 0 0 16px;
+  padding: 6px 50px 6px 30px;
+  // &::before {
+  //   content: "";
+  //   position: absolute;
+  //   left: 0;
+  //   right: 0;
+  //   bottom: 0;
+  //   height: 100%;
+  // }
+  .el-icon-caret-left,.el-icon-caret-right{
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 18px;
+    color: #333;
+    cursor: pointer;
+  }
+  .el-icon-caret-left{
+    left: 4px;
+  }
+  .el-icon-caret-right{
+    right: 30px;
   }
-
   .__tabs {
     display: flex;
-
     .__tab-item {
+      line-height: 1;
       white-space: nowrap;
-      padding: 8px 6px 8px 18px;
-      font-size: 12px;
-      border: 1px solid $c-tab-border-color;
-      border-left: none;
-      border-bottom: 0px;
-      line-height: 14px;
+      padding: 10px 8px 7.5px 10px;
+      font-size: 13px;
+      position: relative;
+      display: flex;
+      align-items: center;
       cursor: pointer;
       transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-        padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-      &:first-child {
-        border-left: 1px solid $c-tab-border-color;
-        border-top-left-radius: 2px;
-        margin-left: 10px;
+      padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      &::after{
+        content: '';
+        width: 2px;
+        height: 40%;
+        position: absolute;
+        right: 0px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: $c-tab-border-color;
       }
-
-      &:last-child {
-        border-top-right-radius: 2px;
-        margin-right: 10px;
+      &:last-child::after {
+        display: none;
       }
 
       &:not(.__is-active):hover {
@@ -290,24 +331,23 @@ export default {
       }
 
       &.__is-active {
-        padding-right: 12px;
-        border-bottom: 1px solid #fff;
+        // padding-right: 12px;
+        // border-bottom: 1px solid #fff;
         color: #409eff;
 
         .el-icon-close {
           width: 12px;
           margin-right: 0px;
-          margin-left: 2px;
+          margin-left: 4px;
         }
       }
 
       .el-icon-close {
-        width: 0px;
         height: 12px;
         overflow: hidden;
         border-radius: 50%;
         font-size: 12px;
-        margin-right: 12px;
+        margin-left: 4px;
         transform-origin: 100% 50%;
         transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
         vertical-align: text-top;