适用于vue3项目的对页面自使用，当内容超出显示器出现滚动轴

在Vue3项目中，如果你需要创建一个可以自动适应屏幕并当内容超过视口显示滚动条的组件，你可以利用`v-bind:class`和CSS来实现这一效果。首先，创建一个名为`ScrollableContent.vue`的组件文件：

<template>
  <div ref="content" class="scrollable-content">
    <slot></slot>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

export default {
  setup() {
    const contentRef = ref(null);

    // 当组件挂载后，检查内容高度是否超过视口高度
    onMounted(() => {
      if (contentRef.value.scrollHeight > contentRef.value.clientHeight) {
        contentRef.value.style.overflow = 'auto'; // 添加滚动条
      }
    });

    return {
      contentRef,
    };
  },
}
</script>

<style scoped>
.scrollable-content {
  position: relative;
  overflow-x: hidden; /* 阻止水平滚动 */
  transition: overflow-y 0.3s ease-in-out; /* 可选动画效果 */
}
</style>

在这个组件中，我们使用了Vue的`ref`来获取内部div的内容区域，然后在`onMounted`生命周期钩子里检查内容的高度。如果高度大于视口高度，就添加`overflow: auto`样式来启用滚动。

要使用这个组件，只需将其导入到其他需要滚动效果的地方，并添加`scrollable-content`类：

<template>
  <ScrollableContent>
    <!-- 这里放置你的内容 -->
    <p v-for="item in items" :key="item.id">{{ item.text }}</p>
  </ScrollableContent>
</template>