elementUI tabs 吸顶功能实现,辣到最底部时候点击tab 回到最初位置

在Element UI中，可以通过监听滚动事件和计算位置来实现Tabs的吸顶功能，并在glue-to-bottom的情况下点击Tab回到最初位置。以下是一个简单的实现示例：

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <!-- 更多的 TabPane -->
  </el-tabs>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: 'first',
      stickyTop: 0, // 记录吸顶时的顶部位置
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= this.stickyTop) {
        // 当滚动到顶部位置时吸顶
      }
    },
    handleTabClick(tab, event) {
      if (window.pageYOffset > this.stickyTop) {
        // 当点击Tab时，如果已经吸顶，则滚动到 stickyTop 位置
        window.scrollTo({
          top: this.stickyTop,
          behavior: 'smooth',
        });
      }
    },
  },
};
</script>

在这个示例中，handleScroll 方法会在滚动时被触发，并计算当前的滚动位置。如果位置大于等于 stickyTop，则认为 Tabs 已经吸顶。handleTabClick 方法会在点击 Tab 时触发，如果当前页面有滚动（吸顶），则会平滑滚动到 stickyTop 位置，从而实现点击Tab回到最初位置的需求。