vue3+ts实现Tab滚动居中

前端fighter2024-03-01 18:42

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元素设置了加粗的字体。