diff --git a/components/content/TabsHeader.vue b/components/content/TabsHeader.vue index d538d6dff..8df730bc2 100644 --- a/components/content/TabsHeader.vue +++ b/components/content/TabsHeader.vue @@ -19,31 +19,33 @@ const tabsRef = ref() const highlightUnderline = ref() -const updateHighlightUnderlinePosition = () => { - const activeTab = tabsRef.value[props.activeTabIndex] - - if (!activeTab) return +const updateHighlightUnderlinePosition = (activeTab) => { + if (!activeTab) { + return + } highlightUnderline.value.style.left = `${activeTab.offsetLeft}px` highlightUnderline.value.style.top = `${activeTab.offsetTop}px` highlightUnderline.value.style.width = `${activeTab.clientWidth}px` highlightUnderline.value.style.height = `${activeTab.clientHeight}px` - highlightUnderline.value.style.transform = `scale(1)` + highlightUnderline.value.style.transform = 'scale(1)' highlightUnderline.value.style.opacity = 1 } -const updateTabs = (i) => { +const updateTabs = ($event, i) => { emit('update:activeTabIndex', i) - nextTick(() => updateHighlightUnderlinePosition()) + nextTick(() => updateHighlightUnderlinePosition($event.target)) } watch( tabsRef, (newVal) => { - if (!newVal) return + if (!newVal) { + return + } setTimeout(() => { - updateHighlightUnderlinePosition() + updateHighlightUnderlinePosition(tabsRef.value.children[props.activeTabIndex]) }, 50) }, { @@ -54,14 +56,13 @@ watch(