diff options
Diffstat (limited to 'packages/client/src/components')
| -rw-r--r-- | packages/client/src/components/global/page-header.vue | 24 |
1 files changed, 13 insertions, 11 deletions
diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue index a080c39dde..5395a87961 100644 --- a/packages/client/src/components/global/page-header.vue +++ b/packages/client/src/components/global/page-header.vue @@ -34,7 +34,7 @@ </template> <script lang="ts" setup> -import { computed, onMounted, onUnmounted, ref, inject, watch } from 'vue'; +import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue'; import tinycolor from 'tinycolor2'; import { popupMenu } from '@/os'; import { scrollToTop } from '@/scripts/scroll'; @@ -137,16 +137,18 @@ onMounted(() => { calcBg(); globalEvents.on('themeChanged', calcBg); - watch(() => props.tab, () => { - const tabEl = tabRefs[props.tab]; - if (tabEl && tabHighlightEl) { - // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある - // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 - const parentRect = tabEl.parentElement.getBoundingClientRect(); - const rect = tabEl.getBoundingClientRect(); - tabHighlightEl.style.width = rect.width + 'px'; - tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px'; - } + watch(() => [props.tab, props.tabs], () => { + nextTick(() => { + const tabEl = tabRefs[props.tab]; + if (tabEl && tabHighlightEl) { + // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある + // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 + const parentRect = tabEl.parentElement.getBoundingClientRect(); + const rect = tabEl.getBoundingClientRect(); + tabHighlightEl.style.width = rect.width + 'px'; + tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px'; + } + }); }, { immediate: true, }); |