html
<template>
<div class="tab-container">
<div class="tab-list" ref="tabList">
<div
v-for="(tab, index) in tabs"
:key="index"
:class="['tab', { active: activeTab === index }]"
@click="changeTab(index)"
>
{{ tab }}
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref, onMounted } from 'vue';
export default {
name: 'TabContainer',
data() {
return {
tabs: ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'],
activeTab: 0,
};
},
mounted() {
onMounted(() => {
this.centerActiveTab();
});
},
methods: {
changeTab(index: number) {
this.activeTab = index;
this.centerActiveTab();
},
centerActiveTab() {
const tabList = this.$refs.tabList as HTMLElement;
const activeTab = tabList.querySelector('.active') as HTMLElement;
if (activeTab) {
const containerWidth = tabList.offsetWidth;
const activeTabWidth = activeTab.offsetWidth;
const activeTabLeft = activeTab.offsetLeft;
const scrollLeft = activeTabLeft - (containerWidth - activeTabWidth) / 2;
tabList.scrollTo({
left: scrollLeft,
behavior: 'smooth',
});
}
},
},
};
</script>
<style scoped>
.tab-container {
width: 100%;
overflow-x: auto;
}
.tab-list {
display: flex;
}
.tab {
padding: 10px;
cursor: pointer;
}
.active {
font-weight: bold;
}
</style>
TabContainer
组件中使用了ref
来获取到tabList
元素的引用,然后在mounted
钩子函数中调用centerActiveTab
方法来初始化时居中显示当前激活的Tab。
在changeTab
方法中,切换Tab时,会更新activeTab
的值,并调用centerActiveTab
方法来将新的激活Tab居中显示。
centerActiveTab
方法中,首先获取到tabList
和当前激活的Tab元素的引用,然后计算出滚动的位置,使激活的Tab居中显示。通过调用scrollTo
方法来实现滚动效果。
最后,在样式中设置了容器的宽度为100%,并设置了overflow-x: auto
来实现水平滚动的效果。每个Tab元素设置了一些基本的样式,激活的Tab元素设置了加粗的字体。