vue3 vue-scrollto 安装并使用在 ant-design-vue list 组件滚动，动态滚动一项到头部的详细代码

在 Vue3 中，`vue-scrollto`是一个方便滚动元素到指定位置的小工具，可以用于快速实现页面内的滚动效果。结合 Ant Design Vue 的 List 组件，我们可以使用它来实现在列表滚动时动态将某项滚动到顶部。以下是安装 `vue-scrollto` 并在其上使用的示例代码：

首先，你需要安装 `vue-scrollto`，可以通过 npm 或者 yarn 来安装：

npm install vue-scrollto --save
# 或者
yarn add vue-scrollto

然后，在你的 main.js 或者其他Vue组件中引入并使用它：

import { createApp } from 'vue'
import { Antd } from 'ant-design-vue'
import VueScrollTo from 'vue-scrollto'

// 全局注册Antd
createApp({
  // ...
}).use(Antd).use(VueScrollTo)

接下来，假设你有一个 List 组件叫 `List.vue`，并且你想当某个操作（比如点击按钮）触发时，滚动到第 n 项，你可以这样做：

<template>
  <a-divider type="vertical" />
  <list :scroll-to="scrollToItem" ref="list">
    <!-- List items here -->
    <template v-for="(item, index) in items" :key="index">
      <li @click="$emit('scrollToItem', index)" :data-index="index">{{ item.title }}</li>
    </template>
  </list>
</template>

<script>
export default {
  props: {
    scrollToItem: {
      type: Number,
      required: true,
      // 这里你可以添加一些验证逻辑，防止滚动到不存在的位置
    },
  },
  mounted() {
    this.scrollToItem(this.scrollToItem);
  },
  methods: {
    scrollToItem(index) {
      this.$refs.list.scrollTo({ y: this.$refs.list.$refs.children[index].offsetTop });
    },
  },
}
</script>

在这个例子中，我们监听了每个列表项的点击事件，并通过 prop 将需要滚动到的索引传递给 `scrollToItem` 方法。这个方法会获取对应索引的元素，然后使用 `vue-scrollto` 将滚动条滚动到该元素的顶部。