Ant Design Vue Tabs组件如何实现滚动吸顶效果？

<template>
  <div>
    <div class="tabs-container" :class="{ 'is-fixed': isFixed }">
      <a-tabs>
        <!-- Tabs内容 -->
      </a-tabs>
    </div>
    <div style="height: 1000px;"> <!-- 可滚动内容 --> </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  setup() {
    const isFixed = ref(false);
    const tabsOffsetTop = ref(0);

    onMounted(() => {
      // 获取tabs距离顶部的距离 (需要根据实际情况调整选择器)
      tabsOffsetTop.value = document.querySelector('.tabs-container')?.offsetTop || 0;
    });

    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      isFixed.value = scrollTop >= tabsOffsetTop.value;
    };

    window.addEventListener('scroll', handleScroll);

    return { isFixed };
  },
});
</script>

<style scoped>
.tabs-container {
  transition: position 0.3s ease; /* 添加过渡效果 */
}

.tabs-container.is-fixed {
  position: fixed;
  top: 0;
  width: 100%; /* 确保固定后宽度占满 */
  z-index: 10; /* 设置z-index，避免被其他元素遮挡 */
}
</style>