vue3 使用antd4的anchor组件不随页面滑动变换选项

<template>
    ...
    <Anchor :items="goodTypeList" :getContainer="getContainerFn"></Anchor>

    <div id="goodsShowBox">
      <div v-for="item in goodsList" :id="item.id" :key="item.id" class="goodsInfoBox">
        ...
      </div>
    </div>
    ...
</template>
<script setup>
import { Anchor } from 'ant-design-vue';

// anchor需要用到的数据格式
const goodTypeList = ref([
    {key: 1,href: '#1',title: 'a'},
    {key: 2,href: '#2',title: 'b'},
    {key: 3,href: '#3',title: 'c'},
    {key: 4,href: '#4',title: 'd'}
]);

const goodsList = ref([
  {id: '1', ...},
  {id: '2', ...},
  {id: '3', ...},
  {id: '4', ...}
])

// 绑定container，解决不随页面滚动而移动anchor选项
function getContainerFn() {
  return document.querySelector('#goodsShowBox');
}
</script>
<style>
...
</style>

参考