上一次提交的漏网之鱼

src/layout/Tabs/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="tabs">
     <el-scrollbar ref="scrollbarDom" class="scroll-container tags-view-container">
-      <Item v-for="menu in menuList" :key="menu.meta.title" :active="activeMenu === menu.path" :menu="menu"
-            @close="delMenu(menu)"/>
+      <Item v-for="menu in menuList" :key="menu.meta.title" :active="activeMenu === menu.path" :menu="menu" @close="delMenu(menu)" />
     </el-scrollbar>
     <div class="handle">
       <el-dropdown placement="bottom">
@@ -11,15 +10,9 @@
         </div>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item :disabled="currentDisabled" icon="el-icon-circle-close" @click="closeCurrentRoute">
-              关闭当前标签
-            </el-dropdown-item>
-            <el-dropdown-item :disabled="menuList.length < 3" icon="el-icon-circle-close" @click="closeOtherRoute">
-              关闭其他标签
-            </el-dropdown-item>
-            <el-dropdown-item :disabled="menuList.length <= 1" icon="el-icon-circle-close" @click="closeAllRoute">
-              关闭所有标签
-            </el-dropdown-item>
+            <el-dropdown-item :disabled="currentDisabled" icon="el-icon-circle-close" @click="closeCurrentRoute"> 关闭当前标签 </el-dropdown-item>
+            <el-dropdown-item :disabled="menuList.length < 3" icon="el-icon-circle-close" @click="closeOtherRoute"> 关闭其他标签 </el-dropdown-item>
+            <el-dropdown-item :disabled="menuList.length <= 1" icon="el-icon-circle-close" @click="closeAllRoute"> 关闭所有标签 </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -32,9 +25,9 @@
 
 <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'
 
 const store = useStore()
@@ -43,7 +36,7 @@ const router = useRouter()
 const scrollbarDom = ref(null)
 const defaultMenu = {
   path: '/dashboard',
-  meta: {title: '首页', hideClose: true},
+  meta: { title: '首页', hideClose: true },
 }
 const contentFullScreen = computed(() => store.state.app.contentFullScreen)
 const currentDisabled = computed(() => route.path === defaultMenu.path)
@@ -65,7 +58,6 @@ router.afterEach(() => {
   initMenu(route)
 })
 
-
 // 全屏
 function onFullscreen() {
   store.commit('app/contentFullScreenChange', !contentFullScreen.value)
@@ -96,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
@@ -104,10 +96,10 @@ function addMenu(menu) {
     if (!a) {
       menuList.value.push({
         path: meta.activeMenu,
-        meta: {title: meta.parentName}
+        meta: { title: meta.parentName },
       })
     }
-    return;
+    return
   } else if (meta.hideTabs) {
     return
   }
@@ -130,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) {
@@ -183,7 +175,6 @@ function setKeepAliveData() {
   store.commit('keepAlive/setKeepAliveComponentsName', keepAliveNames)
 }
 
-
 // 初始化时调用：1. 新增菜单 2. 初始化activeMenu
 addMenu(route)
 initMenu(route)
@@ -227,18 +218,14 @@ initMenu(route)
   position: relative;
   overflow: hidden;
   width: 100%;
-
-  :deep {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
-  }
+}
+:deep(.scroll-container .el-scrollbar__bar) {
+  bottom: 0px;
 }
 
+:deep(.scroll-container .el-scrollbar__wrap) {
+  height: 49px;
+}
 .tags-view-container {
   height: 34px;
   flex: 1;