diff --git a/src/layouts/components/Topbar/Tabbar/index.vue b/src/layouts/components/Topbar/Tabbar/index.vue index 18b9a723..9f8bd10e 100644 --- a/src/layouts/components/Topbar/Tabbar/index.vue +++ b/src/layouts/components/Topbar/Tabbar/index.vue @@ -30,10 +30,20 @@ const tabRef = useTemplateRef('tabRef') watch(() => route, (val) => { if (settingsStore.settings.tabbar.enable) { - tabbarStore.add(val).then(() => { + tabbarStore.add(val) + nextTick(() => { const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value) if (index !== -1) { - tabRef.value && tabsRef.value?.scrollTo(tabRef.value[index].offsetLeft - tabsRef.value.ref?.$el.clientWidth * 0.4) + const tabEl = tabRef.value?.find(item => Number.parseInt(item.dataset.index!) === index) + const containerEl = tabsRef.value?.ref?.$el + if (tabEl && containerEl) { + const tabLeft = tabEl.offsetLeft + const tabWidth = tabEl.offsetWidth + const containerWidth = containerEl.clientWidth + // 计算滚动位置,使标签页居中 + const scrollLeft = tabLeft - (containerWidth - tabWidth) / 2 + tabsRef.value?.scrollTo(scrollLeft) + } tabbarScrollTip() } }) diff --git a/src/store/modules/tabbar.ts b/src/store/modules/tabbar.ts index fb83e2f6..8ad70fb2 100755 --- a/src/store/modules/tabbar.ts +++ b/src/store/modules/tabbar.ts @@ -12,7 +12,7 @@ const useTabbarStore = defineStore( const leaveIndex = ref(-1) // 添加标签页 - async function add(route: RouteLocationNormalized) { + function add(route: RouteLocationNormalized) { const names: string[] = [] route.matched.forEach((v, i) => { if (i > 0) {