Vue中如何使用Ant DesignVue Tabs组件实现滚动吸顶效果？

<code class="vue"><template>
  <div class="scroll-container">
    <div class="parent">
      <product-info></product-info>
      <a-tabs :class="{'is-fixed': isFixed}" :tabbargutter="30" class="tabs" v-model:activeKey="activeKey">
        <a-tab-pane key="performance" tab="性能">...</a-tab-pane>
        <a-tab-pane key="style" tab="样式">...</a-tab-pane>
        <a-tab-pane key="analys" tab="分析">...</a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { ref, nextTick, onActivated } from 'vue';

export default {
  setup() {
    const scrollTop = ref(0);
    const barOffsetTop = ref(0);
    const isFixed = ref(false);
    const activeKey = ref('performance'); // 初始化选中tab

    const handleScroll = (e) => {
      scrollTop.value = e.target.scrollTop;
      isFixed.value = scrollTop.value >= barOffsetTop.value;
    };

    onActivated(() => {
      nextTick(() => {
        barOffsetTop.value = document.getElementsByClassName('tabs')[0]?.offsetTop || 0;
      });
    });

    return {
      scrollTop,
      barOffsetTop,
      isFixed,
      handleScroll,
      activeKey
    };
  },
};
</script>

<style scoped>
.scroll-container {
  height: 100vh;
  overflow-y: auto;
}

.parent {
  position: relative;
}

.is-fixed {
  position: sticky;
  top: 0;
}

.tabs {
  background-color: #fff;
}
</style></code>