GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(components): 修复多页签按钮风格的tab滚动问题

Browse Source
This commit is contained in:
Soybean 2021-11-25 22:02:28 +08:00
parent 20aa39f14e
commit c429cd0293
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layouts/common/GlobalTab/components/MultiTab/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="theme.multiTabStyle.mode === 'chrome'" ref="chromeTabRef" class="flex items-end h-full"> <div v-if="theme.multiTabStyle.mode === 'chrome'" ref="tabRef" class="flex items-end h-full">
<chrome-tab <chrome-tab
v-for="(item, index) in app.multiTab.routes" v-for="(item, index) in app.multiTab.routes"
:key="item.path" :key="item.path"
@ -15,7 +15,7 @@
{{ item.meta?.title }} {{ item.meta?.title }}
</chrome-tab> </chrome-tab>
</div> </div>
<div v-if="theme.multiTabStyle.mode === 'button'" class="flex-y-center h-full"> <div v-if="theme.multiTabStyle.mode === 'button'" ref="tabRef" class="flex-y-center h-full">
<button-tab <button-tab
v-for="item in app.multiTab.routes" v-for="item in app.multiTab.routes"
:key="item.path" :key="item.path"
@ -70,12 +70,12 @@ function setDropdownConfig(x: number, y: number, currentPath: string) {
} }
// 获取当前激活的tab的clientX // 获取当前激活的tab的clientX
const chromeTabRef = ref<HTMLElement | null>(null); const tabRef = ref<HTMLElement | null>(null);
async function getActiveChromeTabClientX() { async function getActiveChromeTabClientX() {
await nextTick(); await nextTick();
const index = app.activeMultiTabIndex; const index = app.activeMultiTabIndex;
if (chromeTabRef.value) { if (tabRef.value) {
const activeTabElement = chromeTabRef.value.children[index]; const activeTabElement = tabRef.value.children[index];
const { x, width } = activeTabElement.getBoundingClientRect(); const { x, width } = activeTabElement.getBoundingClientRect();
const clientX = x + width; const clientX = x + width;
setTimeout(() => { setTimeout(() => {