init

2024-11-29 09:03:59 +08:00
commit 2ffadd89a7
3480 changed files with 879405 additions and 0 deletions
@@ -0,0 +1,210 @@
+<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-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 class="line-name">
+          <h5>{{ item.name }}</h5>
+        </div>
+        <div>
+          <slot :name="item.refName"></slot>
+        </div>
+      </div>
+
+      <div class="scroll-item">
+        <slot name="audit"></slot>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+module.exports = {
+  name: "ELTabPlus",
+  props: {
+    tabs: {
+      type: Array,
+      default: []
+    },
+    h: {
+      type: Number,
+      default: 700
+    }
+  },
+  data() {
+    return {
+      tabName: null
+    }
+  },
+  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'))
+      }
+
+      // 参数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)
+
+    },
+    onScroll(e) {
+      if (e.target.scrollTop === 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
+            }
+          }
+        }
+      })
+    },
+
+    scrollEnd() {
+      this.$nextTick(() => {
+        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'
+        }, 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: #11879f;
+  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>