commit

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

@@ -1,12 +1,15 @@
+/**
+*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"
-                   v-if="tab.visible"
-      ></el-tab-pane>
+      <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" v-if="item.visible">
+      <div v-for="(item,index) in tabs" :key="item.refName" class="scroll-item">
         <div class="line-name">
           <h5>{{ item.name }}</h5>
         </div>
@@ -14,10 +17,6 @@
           <slot :name="item.refName"></slot>
         </div>
       </div>
-
-      <div class="scroll-item">
-        <slot name="audit"></slot>
-      </div>
     </div>
 
   </div>
@@ -38,92 +37,100 @@ module.exports = {
   },
   data() {
     return {
-      tabName: null
+      tabName: null,
+      tabIndex: 0,
     }
   },
   methods: {
     jump(tab, event) {
-      let target = document.querySelector('.scroll-content')
-      let scrollItems = document.querySelectorAll('.scroll-item')
-      // 判断滚动条是否滚动到底部
-      if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
-        this.tabIndex = tab.index.toString()
-      }
-      let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
-      let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
-      // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
-      // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
-      // 计算每一小段的距离
-      let step = totalY / 50
-      if (totalY > distance) {
-        smoothDown(document.querySelector('.scroll-content'))
-      } else {
-        let newTotal = distance - totalY
-        step = newTotal / 50
-        smoothUp(document.querySelector('.scroll-content'))
-      }
+      const scrollItems = this.$el.querySelectorAll('.scroll-item')
+      const targetItem = scrollItems[tab.index]
 
-      // 参数element为滚动区域
-      function smoothDown(element) {
-        if (distance < totalY) {
-          distance += step
-          element.scrollTop = distance
-          setTimeout(smoothDown.bind(this, element), 10)
-        } else {
-          element.scrollTop = totalY
-        }
-      }
-
-      // 参数element为滚动区域
-      function smoothUp(element) {
-        if (distance > totalY) {
-          distance -= step
-          element.scrollTop = distance
-          setTimeout(smoothUp.bind(this, element), 10)
-        } else {
-          element.scrollTop = totalY
-        }
-      }
-
-      console.log(this.tabName)
+      // ✅ 用 scrollIntoView 替代手动计算，更可靠
+      targetItem?.scrollIntoView({behavior: 'auto', block: 'start'})
+      this.tabName = tab.name
 
     },
     onScroll(e) {
-      if (e.target.scrollTop === 0) {
-        this.tabName = this.tabs[0].refName
+      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
       }
 
-      $('#app > div.guava-main-content > span > div.el-card').each((idx, item) => {
-        if ($(item).is(':visible')) {
-          const scrollItems = $(item).find('.scroll-item')
-          for (let i = scrollItems.length - 1; i >= 0; i--) {
-            let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 300
-            if (judge) {
-              this.tabIndex = i.toString()
-              this.tabName = this.tabs[this.tabIndex].refName
-              break
-            }
+      // ✅ 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(() => {
-          $('#app > div.guava-main-content > span > div.el-card').each((idx, item) => {
-            if ($(item).is(':visible')) {
-              const scrollContent = $(item).find('.scroll-content')[0]
-              scrollContent.scrollTop = scrollContent.scrollHeight
-            }
-          })
-          // document.querySelector('.scroll-content').scrollTop = document.querySelector('.scroll-content').scrollHeight
-          this.tabName = 'audit'
+          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() {
 
@@ -175,7 +182,7 @@ module.exports = {
 .line-name::before {
   content: "";
   width: 5px;
-  background: #11879f;
+  background: rgb(24, 103, 176);
   display: inline-block;
   position: absolute;
   left: 0;
@@ -207,4 +214,4 @@ module.exports = {
   color: #fff;
 }
 
-</style>
+</style>