zhgh_hmc/src/main/resources/static/components/plugins/ELTabPlus.vue

/**
*Desc:
*Create by: jug
*Create time:2023/5/8/14:52
*/
<template>
  <div>
    <el-tabs class="customer-tab" type="card" @tab-click="jump" v-model="tabName">
      <el-tab-pane v-for="(tab, index) in tabs" :name="tab.refName" :key="index" :label="tab.name"></el-tab-pane>
    </el-tabs>
    <div class="scroll-content" @scroll="onScroll" :style="{height:h+'px'}">
      <div v-for="(item,index) in tabs" :key="item.refName" class="scroll-item">
        <div class="line-name">
          <h5>{{ item.name }}</h5>
        </div>
        <div>
          <slot :name="item.refName"></slot>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
module.exports = {
  name: "ELTabPlus",
  props: {
    tabs: {
      type: Array,
      default: []
    },
    h: {
      type: Number,
      default: 700
    }
  },
  data() {
    return {
      tabName: null,
      tabIndex: 0,
    }
  },
  methods: {
    jump(tab, event) {
      const scrollItems = this.$el.querySelectorAll('.scroll-item')
      const targetItem = scrollItems[tab.index]

      // ✅ 用 scrollIntoView 替代手动计算，更可靠
      targetItem?.scrollIntoView({behavior: 'auto', block: 'start'})
      this.tabName = tab.name

    },
    onScroll(e) {
      const container = e.target
      const {scrollTop, scrollHeight, clientHeight} = container

      // ✅ 1. 优先判断：是否滚动到底部（预留 1px 容差）
      if (scrollTop + clientHeight >= scrollHeight - 1) {
        const lastIndex = this.tabs.length - 1
        if (this.tabIndex !== lastIndex) {
          this.tabIndex = lastIndex
          this.tabName = this.tabs[lastIndex]?.refName
        }
        return // ✅ 命中底部直接返回，避免后续逻辑干扰
      }

      // ✅ 2. 顶部边界：scrollTop 为 0 时选中第一个
      if (scrollTop === 0) {
        if (this.tabIndex !== 0) {
          this.tabIndex = 0
          this.tabName = this.tabs[0]?.refName
        }
        return
      }

      // ✅ 3. 中间区域：正常遍历匹配（移除 jQuery，用 this.$el 局部查询）
      const scrollItems = this.$el.querySelectorAll('.scroll-item')
      const threshold = 100 // 可视区域偏移阈值

      for (let i = scrollItems.length - 1; i >= 0; i--) {
        const itemTop = scrollItems[i].offsetTop - scrollItems[0].offsetTop
        if (scrollTop + threshold >= itemTop) {
          if (this.tabIndex !== i) {
            this.tabIndex = i
            this.tabName = this.tabs[i]?.refName
          }
          break
        }
      }
    },
    scrollToTop(){
      const tryScroll = () => {
        const scrollEl = this.$el.querySelector('.scroll-content')
        if (!scrollEl) return

        // 检查内容是否已渲染（scrollHeight > clientHeight 说明有滚动空间）
        if (scrollEl.scrollHeight <= scrollEl.clientHeight) {
          // 内容还没加载完，100ms 后重试
          setTimeout(tryScroll, 100)
          return
        }

        // ✅ 内容就绪，执行滚动
        scrollEl.scrollTo({ top: 0, behavior: 'auto' })
        this.tabIndex = 0
        this.tabName = this.tabs[0]?.refName
      }

      this.$nextTick(() => {
        setTimeout(tryScroll, 200)
      })
    },
    scrollEnd() {
      this.$nextTick(() => {
        // 等待 slot 内容渲染（根据内容复杂度调整 200~400ms）
        setTimeout(() => {
          const scrollEl = this.$el.querySelector('.scroll-content')
          if (!scrollEl || !this.tabs?.length) return

          // ✅ 1. 滚动到底部
          scrollEl.scrollTop = scrollEl.scrollHeight

          // ✅ 2. 选中最后一个 tab
          const lastIndex = this.tabs.length - 1
          this.tabIndex = lastIndex
          this.tabName = this.tabs[lastIndex].refName

          // ✅ 3. 可选：强制触发一次 onScroll 同步状态（节流场景下更可靠）
          this.onScroll?.({ target: scrollEl })
        }, 250)
      })
    },
  },
  created() {

  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

.scrollbar {
  height: 10px;
  background-color: #f1f1f1;
}

.scrollbar-thumb {
  border-radius: 10px;
  background-color: #888;
}

.scrollbar-thumb:hover {
  background-color: #555;
}


.scroll-content {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  margin-top: 10px;
}

.customer-tab {
  /*width: 100%;*/
  background-color: #f5f7fa;
  padding: 5px;
  height: 50px;
  /*display: flex;*/
  /*overflow-x: scroll;*/
}

.line-name {
  padding-left: 10px;
  position: relative;
}

.line-name::before {
  content: "";
  width: 5px;
  background: rgb(24, 103, 176);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}


.el-tabs--card > .el-tabs__header {
  border-bottom: none;
  margin: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  /*width: 100%;*/
  /*display: flex;*/
  /*justify-content: space-around;*/
  border: none;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav .el-tabs__item {
  text-align: center;
  border: none;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav .is-active {
  border-radius: 4px;
  background-color: #1867b0;
  color: #fff;
}

</style>