优化标签导航栏的表现。

src/layout/Tabs/index.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="tabs">
-    <el-scrollbar ref="scrollbarDom">
-      <div style="display: flex; flex-wrap: nowrap">
-        <Item v-for="menu in menuList" :key="menu.meta.title" :active="activeMenu === menu.path" :menu="menu" @close="delMenu(menu)" />
+  <div class="tabs-box">
+    <el-scrollbar ref="scrollbarDom" class="tab">
+      <div class="scrollbar-flex-content">
+        <Item v-for="menu in menuList" :key="menu.meta.title" :active="activeMenu === menu.path" :menu="menu"
+              @close="delMenu(menu)"/>
       </div>
     </el-scrollbar>
     <div class="handle">
       <el-dropdown placement="bottom">
         <div class="el-dropdown-link">
-          <el-icon><ArrowDown /></el-icon>
+          <el-icon>
+            <ArrowDown/>
+          </el-icon>
         </div>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item :disabled="currentDisabled" icon="CircleClose" @click="closeCurrentRoute"> 关闭当前标签 </el-dropdown-item>
-            <el-dropdown-item :disabled="menuList.length < 3" icon="CircleClose" @click="closeOtherRoute"> 关闭其他标签 </el-dropdown-item>
-            <el-dropdown-item :disabled="menuList.length <= 1" icon="CircleClose" @click="closeAllRoute"> 关闭所有标签 </el-dropdown-item>
+            <el-dropdown-item :disabled="currentDisabled" icon="CircleClose" @click="closeCurrentRoute"> 关闭当前标签
+            </el-dropdown-item>
+            <el-dropdown-item :disabled="menuList.length < 3" icon="CircleClose" @click="closeOtherRoute"> 关闭其他标签
+            </el-dropdown-item>
+            <el-dropdown-item :disabled="menuList.length <= 1" icon="CircleClose" @click="closeAllRoute"> 关闭所有标签
+            </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -24,10 +30,11 @@
 
 <script name="tabs" setup>
 import Item from './item.vue'
-import { computed, nextTick, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute, useRouter } from 'vue-router'
+import {computed, nextTick, ref, watch} from 'vue'
+import {useStore} from 'vuex'
+import {useRoute, useRouter} from 'vue-router'
 import tabsHook from './tabsHook'
+import {getScrollTop} from "@/utils/el-table-scroll";
 
 const store = useStore()
 const route = useRoute()
@@ -35,7 +42,7 @@ const router = useRouter()
 const scrollbarDom = ref(null)
 const defaultMenu = {
   path: '/dashboard',
-  meta: { title: '首页', hideClose: true },
+  meta: {title: '首页', hideClose: true},
 }
 const currentDisabled = computed(() => route.path === defaultMenu.path)
 
@@ -81,7 +88,7 @@ function closeAllRoute() {
 
 // 添加新的菜单项
 function addMenu(menu) {
-  let { path, meta, name } = menu
+  let {path, meta, name} = menu
   if (meta.activeMenu) {
     let a = menuList.value.some((obj) => {
       return obj.path === meta.activeMenu
@@ -89,7 +96,7 @@ function addMenu(menu) {
     if (!a) {
       menuList.value.push({
         path: meta.activeMenu,
-        meta: { title: meta.parentName },
+        meta: {title: meta.parentName},
       })
     }
     return
@@ -115,8 +122,8 @@ function delMenu(menu) {
       store.commit('keepAlive/delKeepAliveComponentsName', menu.name)
     }
     menuList.value.splice(
-      menuList.value.findIndex((item) => item.path === menu.path),
-      1
+        menuList.value.findIndex((item) => item.path === menu.path),
+        1
     )
   }
   if (menu.path === activeMenu.value) {
@@ -134,7 +141,9 @@ function initMenu(menu) {
   nextTick(() => {
     try {
       setPosition()
-    } catch (e) {}
+    } catch (e) {
+      console.log(e)
+    }
   })
 }
 
@@ -142,12 +151,12 @@ function initMenu(menu) {
 function setPosition() {
   if (scrollbarDom.value) {
     const domBox = {
-      scrollbar: scrollbarDom.value.scrollbar.querySelector('.el-scrollbar__wrap '),
-      activeDom: scrollbarDom.value.scrollbar.querySelector('.active'),
-      activeFather: scrollbarDom.value.scrollbar.querySelector('.el-scrollbar__view'),
+      scrollbar: scrollbarDom.value.$el.querySelector('.el-scrollbar__wrap '),
+      activeDom: scrollbarDom.value.$el.querySelector('.active'),
+      activeFather: scrollbarDom.value.$el.querySelector('.el-scrollbar__view'),
     }
-    for (let i in domBox) {
-      if (!domBox[i]) {
+    for (let key in domBox) {
+      if (!domBox[key]) {
         return
       }
     }
@@ -156,12 +165,15 @@ function setPosition() {
       activeDom: domBox.activeDom.getBoundingClientRect(),
       activeFather: domBox.activeFather.getBoundingClientRect(),
     }
-    const num = domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width
-    domBox.scrollbar.scrollLeft = num
+    scrollbarDom.value.scrollTo({
+      top: 0,
+      left: domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width,
+      behavior: 'smooth',
+    })
+    // domBox.scrollbar.scrollLeft = domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width
   }
 }
 
-// 配置需要缓存的数据
 function setKeepAliveData() {
   let keepAliveNames = []
   menuList.value.forEach((menu) => {
@@ -170,13 +182,12 @@ function setKeepAliveData() {
   store.commit('keepAlive/setKeepAliveComponentsName', keepAliveNames)
 }
 
-// 初始化时调用：1. 新增菜单 2. 初始化activeMenu
 addMenu(route)
 initMenu(route)
 </script>
 
 <style lang="scss" scoped>
-.tabs {
+.tabs-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -186,10 +197,14 @@ initMenu(route)
   border-top: 1px solid var(--system-header-border-color);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 
+  .tab {
+    width: calc(100% - 40px);
+  }
+
   .handle {
     min-width: 35px;
     height: 100%;
-    background-color: rgb(228, 228, 228);
+    background-color: rgb(234, 233, 233);
     display: flex;
     align-items: center;
 
@@ -215,13 +230,15 @@ initMenu(route)
   overflow: hidden;
   width: 100%;
 }
+
 :deep(.scroll-container .el-scrollbar__bar) {
-  bottom: 0px;
+  bottom: 0;
 }
 
 :deep(.scroll-container .el-scrollbar__wrap) {
   height: 49px;
 }
+
 .tags-view-container {
   height: 34px;
   flex: 1;
@@ -240,4 +257,11 @@ initMenu(route)
     outline: none;
   }
 }
+
+
+.scrollbar-flex-content {
+  display: flex;
+  width: calc(100% - 50px);
+  //overflow-x: scroll;
+}
 </style>

src/layout/Tabs/item.vue

@@ -42,10 +42,12 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .tags-view-item {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
   height: 24px;
   line-height: 24px;
   border: 1px solid var(--system-header-border-color);