帮我再vue3中写一个tabs 并且再内容滚动到底的时候会触发事件

在 Vue3 中创建一个带滚动监听的 Tab 组件，你可以使用 Element UI 的 tabs 组件作为基础，并添加自定义事件处理。Element UI 提供了丰富的组件库，对于 tabs 功能有很好的支持。

首先，安装 Element UI：

npm install element-ui@latest

然后，在你的项目中引入并使用 tabs 组件：

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="Tab 1" name="tab1">Content for Tab 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">Content for Tab 2 (这里可以放很长的内容)</el-tab-pane>
    <!-- 添加更多 tab 如果需要 -->
  </el-tabs>

  <div ref="scrollArea" class="scroll-content" :style="{ height: 'calc(100% - 60px)' }">
    <transition-group tag="p">
      <!-- 使用 slot 或者动态数据渲染每个 tab 内容 -->
      <slot v-for="(item, index) in contentItems" :key="index">{{ item }}</slot>
    </transition-group>
  </div>
</template>

<script>
import { ref, onMounted, watch, defineComponent } from 'vue';
import { ElTabs, ElTabPane } from "element-plus";

export default defineComponent({
  components: {
    ElTabs,
    ElTabPane
  },
  data() {
    return {
      activeName: "tab1", // 初始选中的 tab
      contentItems: ["这是Tab1的内容", "这是Tab2的非常长的内容..."], // 长内容数组
    };
  },
  methods: {
    handleTabClick(tabName) {
      this.activeName = tabName;
    },
    
    // 当 scroll 区域滚动到底部时触发的函数
    onScrollBottom() {
      this.$refs.scrollArea.scrollTop = this.$refs.scrollArea.scrollHeight; // 设置滚动到底部
      // 这里可以触发你想执行的事件
      this.$emit('tab-scroll-bottom'); // 触发自定义事件
    }
  },
  mounted() {
    // 滚动监听
    onMounted(() => {
      const scrollArea = this.$refs.scrollArea;
      scrollArea.addEventListener('scroll', () => {
        if (scrollArea.scrollTop + scrollArea.clientHeight === scrollArea.scrollHeight) {
          this.onScrollBottom();
        }
      });
    });
  },
});
</script>

<style scoped>
.scroll-content {
  position: absolute;
  bottom: 0;
  overflow-y: auto;
}
</style>

在这个例子中，当内容滚动到底部时，`onScrollBottom` 函数会被触发，同时会发送一个名为 `tab-scroll-bottom` 的自定义事件。你可以根据这个事件在父组件中处理后续操作。