导航栏修改

dsk-operate-ui/src/layout/components/TagsView/index.vue

 <template>
   <div id="tags-view-container" class="tags-view-container">
-    <div id="getviews">
-      <div class="alltags" v-if="visitedViews.length > 0">
-        <div class="imgs" @click="closeall">
-          <img src="@/assets/images/all.png" v-if="!showall" />
-          <img src="@/assets/images/all_on.png" v-if="showall" />
-          <!--<i class="el-icon-arrow-down" v-if="!showall"></i> <i class="el-icon-arrow-up" v-if="showall"></i>-->
-        </div>
-        <el-collapse-transition>
-          <div class="tagslist" :class="{'noshow':!showall}">
-            <router-link v-for="(tag, index) in visitedViews" ref="tag" :key="tag.fullPath" :class="isActive(tag)?'active':''"
-              :to="{ path: tag.fullPath, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
-              @contextmenu.prevent.native="openMenu(tag,$event)">
-              <div @click="changetags">
-                <i class="el-icon-check"></i>
-                <span :id="isActive(tag)?'tagTitles':''">{{ tag.title }}</span>
-              </div>
-            </router-link>
-            <div class="clasall" @click="closeAllTag(selectedTag)">关闭全部标签</div>
-          </div>
-        </el-collapse-transition>
-      </div>
+    <div id="getviews" ref="getviews">
       <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
         <draggable v-model="visitedViews" :options="dragOptions" @end="end">
           <router-link v-for="(tag, index) in visitedViews" ref="tag" :key="tag.fullPath" :class="isActive(tag)?'active':''"
@@ -29,10 +9,12 @@
             <!--<svg :class="isActive(tag)?'tags-icon tags-icon-active':'tags-icon'" aria-hidden="true">-->
               <!--<use :xlink:href="iconName(tag)" />-->
             <!--</svg>-->
+            <div class="hoverclass">
               <span :id="isActive(tag)?'tagTitle':''">{{ tag.title.replace(/<[^>]+>/g, '') }}</span>
               <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
               <i
                 :class="index!=visitedViews.length-1 && index != isActiveIndex() && index != isActiveIndex()-1?'tags-item-line':'tags-item-line item-color'" />
+            </div>
           </router-link>
         </draggable>
       </scroll-pane>
@@ -44,16 +26,35 @@
         <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
         <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
       </ul>
+
+      <div class="alltags" v-if="visitedViews.length > 0 && havemore">
+        <div class="imgs" @click="closeall" :class="{'showall':showall}">
+          <img src="@/assets/images/index/lookmore.png" />
+        </div>
+        <el-collapse-transition>
+          <div class="tagslist" :class="{'noshow':!showall}">
+            <router-link v-for="(tag, index) in visitedViews" ref="tag" :key="tag.fullPath" :class="isActive(tag)?'active':''"
+                         :to="{ path: tag.fullPath, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
+                         @contextmenu.prevent.native="openMenu(tag,$event)">
+              <div @click="changetags">
+                <i class="el-icon-check"></i>
+                <span :id="isActive(tag)?'tagTitles':''">{{ tag.title }}</span>
+              </div>
+            </router-link>
+            <div class="clasall" @click="closeAllTag(selectedTag)">关闭全部标签</div>
+          </div>
+        </el-collapse-transition>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable';
-import ScrollPane from './ScrollPane';
-import path from 'path';
+  import draggable from 'vuedraggable'
+  import ScrollPane from './ScrollPane'
+  import path from 'path'
 
-export default {
+  export default {
   components: { ScrollPane, draggable },
   data() {
     return {
@@ -69,7 +70,8 @@ export default {
         ghostClass: 'ghost', // 拖拽过程中占位元素的class名称
         sort: true, // 是否启用排序功能
         draggable: '.tags-view-item', // 可拖拽元素的选择器
-      }
+      },
+      havemore:false,
     };
   },
   computed: {
@@ -105,6 +107,7 @@ export default {
       this.addTags();
       this.moveToCurrentTag();
       this.getviews();
+      this.getviewswidth()
     },
     visible(value) {
       if (value) {
@@ -118,6 +121,7 @@ export default {
     this.$nextTick(() => {
       this.initTags();
       this.addTags();
+      this.getviewswidth()
     });
   },
   methods: {
@@ -139,6 +143,12 @@ export default {
       });
       sessionStorage.setItem("views", JSON.stringify(viewlist));
     },
+    getviewswidth(){
+      let fatherwidth = this.$refs.getviews.offsetWidth-6
+      let viewlength = this.$store.state.tagsView.visitedViews.length
+      //是否超出了能展示最多的个数
+      this.havemore = fatherwidth/80<viewlength
+    },
     changetags() {
       this.showall = false;
     },
@@ -343,20 +353,26 @@ export default {
   background: #fff;
   position: relative;
   ::v-deep .el-scrollbar__wrap {
-    margin-left: 64px;
+    /*margin-left: 64px;*/
+    margin-left: 12px;
+    padding-top: 20px;
   }
   .tags-view-wrapper {
+    ::v-deep .el-scrollbar__view{
+    >div{display: flex;}
+    }
     .tags-view-item {
       display: inline-block;
       position: relative;
       cursor: pointer;
-      min-width: 128px;
-      height: 32px;
-      line-height: 32px;
-      color: #495060;
+      height: 36px;
+      line-height: 36px;
+      color: rgba(35, 35, 35, 0.4);
       background: #fff;
-      padding: 0 20px 0 8px;
       font-size: 12px;
+      max-width: 140px;
+      min-width: 80px;
+      flex: 1 1 0px;
       .tags-icon {
         width: 16px;
         height: 16px;
@@ -370,11 +386,11 @@ export default {
       .tags-item-line {
         display: block;
         width: 1px;
-        height: 24px;
+        height: 14px;
         background: #d0d1d9;
         position: absolute;
         right: 0;
-        top: 4px;
+        top: 9px;
         z-index: 2;
         &.item-color {
           background: #ffffff;
@@ -383,23 +399,31 @@ export default {
       /*&:first-of-type {*/
       /*margin-left: 64px;*/
       /*}*/
+      .hoverclass{
+        padding: 0 20px 0 8px;
+        height: 28px;
+        line-height: 28px;
+        margin: 4px;
+        width: calc(100% - 8px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-radius: 4px;
         &:hover {
-        .el-icon-close {
-          background-color: rgba(153, 153, 153, 0.3);
-          color: #999999;
+          background: #F5F5F5;
+          color: #232323;
         }
+
+      }
+      .el-icon-close:hover {
+        background: #EEEEEE;;
+        color: #999999;
       }
       &.active {
         background-color: #f5f5f5;
         color: #232323;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
-        &:hover {
-          .el-icon-close {
-            background-color: initial;
-            color: initial;
-          }
-        }
       }
     }
   }
@@ -428,9 +452,9 @@ export default {
     position: absolute;
     align-items: center;
     justify-content: center;
-    width: 24px;
-    height: 24px;
-    left: 24px;
+    width: 16px;
+    height: 16px;
+    right: -34px;
     top: 28px;
     cursor: pointer;
     text-align: center;
@@ -438,15 +462,23 @@ export default {
     &::after {
       content: " ";
       position: absolute;
-      border-right: 1px solid #efefef;
       height: 18px;
       width: 0;
       top: 3px;
       right: -8px;
     }
-    .imgs > img {
-      width: 24px;
-      height: 24px;
+
+    .imgs {
+      border-radius: 4px;
+      &:hover{
+        background: #EEEEEE;
+      }
+      > img {
+        width: 16px;
+      }
+    }
+    .showall{
+      background: #EEEEEE;
     }
     .tagslist {
       transition: all 0.2s;
@@ -521,8 +553,8 @@ export default {
   .tags-view-item {
     .el-icon-close {
       position: absolute;
-      right: 5px;
-      top: 8px;
+      right: 9px;
+      top: 10px;
       width: 16px;
       height: 16px;
       vertical-align: 2px;
@@ -533,9 +565,10 @@ export default {
       &:before {
         transform: scale(0.95);
         display: inline-block;
-        vertical-align: -2.5px;
+        vertical-align: -1.5px;
       }
     }
   }
 }
+
 </style>