使用 scrollIntoView 的vue3例子

在 Vue 3 中，虽然 `scrollIntoView` 是原生的 DOM 功能，但在组件中使用它可以采用自定义事件、计算属性或者指令的方式。这里是一个使用自定义方法配合指令的例子：

首先，在你的 Vue 组件里定义一个自定义方法，比如 `scrollToTop`：

export default {
  methods: {
    scrollToTop(element) {
      if (element) {
        element.scrollIntoView({ block: 'top', behavior: 'smooth' });
      }
    },
  },
}

接下来，你可以在模板中使用 `v-scroll-top` 指令，给需要滚动的元素添加该指令：

<div v-scroll-top="element" ref="element">
  这里是内容，点击上方滚动到顶部
</div>

<script setup>
import { onMounted } from 'vue';
const element = ref(null);

onMounted(() => {
  // 初始化时设置元素
  element.value = document.querySelector('.your-target-element');
});

useEffect(() => {
  // 当元素发生变化时，更新滚动行为
  element.value && element.value.$el.addEventListener('click', () => scrollToTop(element.value));
}, [element]);
</script>

在这个例子中，`v-scroll-top` 指令会监听元素是否发生变化，如果元素存在，当用户点击时，就会自动滚动到元素的顶部。