diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue index 4999b7df1..111eb2a3e 100644 --- a/src/layout/components/tag/index.vue +++ b/src/layout/components/tag/index.vue @@ -33,7 +33,7 @@ import closeOther from "/@/assets/svg/close_other.svg"; import closeRight from "/@/assets/svg/close_right.svg"; import { emitter } from "/@/utils/mitt"; -import { templateRef } from "@vueuse/core"; +import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core"; import { transformI18n } from "/@/utils/i18n"; import { storageLocal } from "/@/utils/storage"; import { useRoute, useRouter } from "vue-router"; @@ -54,12 +54,24 @@ const tabDom = templateRef("tabDom", null); const containerDom = templateRef("containerDom", null); const scrollbarDom = templateRef("scrollbarDom", null); -watch([route], () => { +const dynamicTagView = () => { const index = dynamicTagList.value.findIndex(item => { return item.path === route.path; }); moveToView(index); +}; + +watch([route], () => { + dynamicTagView(); }); + +useResizeObserver( + scrollbarDom, + useDebounceFn(() => { + dynamicTagView(); + }, 200) +); + const tabNavPadding = 10; const moveToView = (index: number): void => { if (!instance.refs["dynamic" + index]) { @@ -72,7 +84,7 @@ const moveToView = (index: number): void => { const scrollbarDomWidth = scrollbarDom.value ? scrollbarDom.value.offsetWidth : 0; - // 标签页导航栏总长度(包含溢出部分) + // 已有标签页总长度(包含溢出部分) const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0; if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) { @@ -389,7 +401,6 @@ function showMenuModel(currentPath: string, refresh = false) { let routeLength = unref(relativeStorage.routesInStorage).length; // currentIndex为1时,左侧的菜单是首页,则不显示关闭左侧标签页 let currentIndex = allRoute.findIndex(v => v.path === currentPath); - moveToView(currentIndex); // 如果currentIndex等于routeLength-1,右侧没有菜单,则不显示关闭右侧标签页 showMenus(true);