Element的Tabs标签页改成滚动监听

效果图

原文档Tabs标签页

<el-tabs v-model="activeName" @tab-click="handleClick">
    <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>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>

修改

<div id="tsp_box">
    <!-- :class="{'nav-fiexd': navBarFixed}"动态添加吸顶样式 -->
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tab_vnc" :class="{'nav-fiexd': navBarFixed}" id="tab_vnc" :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <el-tab-pane class="tab_pane" label="购买VNC" name="To_buy_VNC"> </el-tab-pane>
        <el-tab-pane class="tab_pane" label="持有VNC" name="To_hold_VNC"> </el-tab-pane>
        <el-tab-pane class="tab_pane" label="质押VNC" name="To_pledge_VNC"> </el-tab-pane>
        <el-tab-pane class="tab_pane" label="回购与销毁VNC" name="To_Repurchase_VNC"> </el-tab-pane>
    </el-tabs>
    <div class="Tab_box">
        <div class="buy_VNC" ref="To_buy_VNC"></div>
        <div class="hold_VNC" ref="To_hold_VNC"></div>
        <div class="pledge_VNC" ref="To_pledge_VNC"></div>
        <div class="Repurchase_VNC" ref="To_Repurchase_VNC"></div>
    </div>
</div>

js

<script>
export default {
  name: "Home",
  data() {
    return {
      activeName: "first",
      isApp: false,
      navBarFixed:false
    };
  },
  components: {
    Header,
    Foot,
  },
  mounted() {
    this.drawLine();
    // 事件监听滚动条
    window.addEventListener("scroll", this.watchScroll);
  },
   destroyed() {
    // 移除事件监听
    window.removeEventListener("scroll", this.watchScroll);
    window.removeEventListener("scroll", this.handleClick);
  },
  methods: {
        //吸顶效果
        watchScroll() {
            // 滚动的距离
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            // 容器的高度
            var offsetTop = document.querySelector("#title_bg").offsetHeight;
            // console.log("scrollTop=>", scrollTop, "  offsetTop=>", offsetTop);
            //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
            if (scrollTop > offsetTop) {
                  this.navBarFixed = true;
            } else {
                  this.navBarFixed = false;
            }
        },
        handleClick(tab, event) {
            console.log('tab,event',tab, event);
            var domId = $(event.target).attr("id");
            console.log('domId',domId);
            // dom节点到顶部的距离
            var positionHeight = $(this.$refs[domId.replace("tab-", "")]).offset().top - 70;
            console.log('positionHeight',positionHeight);
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            // 滑动效果
            var speed = (positionHeight - scrollTop) / 100;
            // console.log('speed',speed)

            var OpTime = setInterval(() => {
                  if(speed>0){
                    // 顺
                    if (document.documentElement.scrollTop >= positionHeight) {
                          clearInterval(OpTime);
                          return;
                    }
                }else{
                    // 逆
                    if (document.documentElement.scrollTop <= positionHeight) {
                          clearInterval(OpTime);
                          return;
                    }
                 }
                  // 滑动的距离等于滑动的距离+
                  document.documentElement.scrollTop = document.documentElement.scrollTop + speed;
            }, 5);
            // console.log();
        },
    }
}


</script>

css
吸顶样式

#tsp_box .nav-fiexd{
    position: fixed;
    top: 70px;
    width: 100%;
    z-index: 10;
 }