vue3自动滚动列表组件

你可以通过使用Vue3的`ref`和`watch`来实现自动滚动列表组件。以下是一个简单的示例代码：

<template>
  <div ref="list" class="list" :style="{ height: height + 'px' }">
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'AutoScrollList',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 200
    }
  },
  setup(props) {
    const listRef = ref(null)

    watch(
      () => props.items,
      () => {
        const listEl = listRef.value
        if (listEl) {
          listEl.scrollTop = listEl.scrollHeight
        }
      }
    )

    return {
      listRef
    }
  }
}
</script>

<style>
.list {
  overflow-y: auto;
}
</style>

在这个组件中，我们使用了`ref`来获取列表容器的DOM元素，并使用`watch`来监听`props.items`的变化。每当`props.items`发生变化时，我们将滚动条自动滚动到底部。这样，我们就可以实现一个自动滚动的列表组件。