vue组件 元素内自动滚动，鼠标移入暂停，支持自己滑动

vue组件 元素内自动滚动，鼠标移入暂停，支持自己滑动
大屏看板用的，注释写全了，自己看吧

<!-- 组件名称: 转发数排行榜  -->
<!--
用法:
  参数说明:

  使用示例:

-->
<template>
  <div class="component">
    <div
      ref="forwardScrollBox"
      class="list_dv"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div ref="forwardContent" class="scroll_dv">
        <div v-for="(item, index) in list" :key="index" class="list_item dfac">
          <div class="ico_dv dfcen">
            <img
              :src="`https://desk-calenda.oss-cn-beijing.aliyuncs.com/static-h5/taili-ms/kanban/forward_tit_${
                index < 3 ? index + 1 : 4
              }.png`"
              class="num_ico"
            >
            <span>{{ index + 1 }}</span>
          </div>
          <h6 class="text_line1">{{ item.itemName }}</h6>
          <div class="statistic_dv dfac">
            <img
              v-for="numItem in Math.floor(
                ((item.itemNumber / totalCount) * 100) / 5
              )"
              :key="numItem + 100"
              :src="`https://desk-calenda.oss-cn-beijing.aliyuncs.com/static-h5/taili-ms/kanban/forward_base_${
                index < 3 ? index + 1 : 4
              }.png`"
              class="forward_base_ico"
            >
            <div
              v-for="numItem in 20 -
                Math.floor(((item.itemNumber / totalCount) * 100) / 5)"
              :key="numItem"
              class="forward_bg_ico"
            />
            <!-- <img
              v-for="(numItem, numIndex) in (20 -
                Math.floor(((item.itemNumber / totalCount) * 100) / 5))"
              :key="numIndex"
              src="https://desk-calenda.oss-cn-beijing.aliyuncs.com/static-h5/taili-ms/kanban/forward_base_bg.png"
              class="forward_bg_ico"
            > -->
          </div>
          <div class="current_num">{{ item.itemNumber }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  components: {},
  props: {},
  data() {
    return {
      totalCount: 10000, // 总数
      scrollContentHeight: 0, // 滚动内容的高度
      scrollBoxHeight: 0, // 滚动父级盒子的高度
      scrollableHeight: 0, // 可以滚动的高度
      scrollTop: 0, // 元素已经滚动的高度
      timer2: null, // 定时器
      list: [
        {
          itemName: '呼和浩特分支',
          itemNumber: 8700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 6700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 5700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 4700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 3700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 2700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 1700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 700
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 70
        },
        {
          itemName: '呼和浩特分支',
          itemNumber: 1
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.$nextTick(() => {
      // 窗口大小变化时，重新获取滚动相关元素的高度
      window.onresize = this.regainHeight()
      // 监听元素滚动事件
      // this.$refs.forwardScrollBox.addEventListener('scroll', this.handleScroll, true)
    })
  },
  destroyed() {
    // 离开时销毁定时器
    clearInterval(this.timer2)
  },
  methods: {
    // 页面第一次进入或者窗口大小变化时，获取滚动相关元素的高度
    regainHeight() {
      // 获取需要滚动元素的真实高度
      this.scrollContentHeight = this.$refs.forwardContent.getBoundingClientRect().height
      // 获取限制高度滚动容器的真实高度
      this.scrollBoxHeight = this.$refs.forwardScrollBox.getBoundingClientRect().height
      // 可以滚动的高度
      this.scrollableHeight = this.scrollContentHeight - this.scrollBoxHeight
      console.log('内容高度', this.scrollContentHeight, '盒子高度', this.scrollBoxHeight, '可以滚动的高度', this.scrollableHeight)
      this.autoScroll()
    },
    // 自动滚动
    autoScroll() {
      this.timer2 = setInterval(() => {
        if (this.scrollableHeight >= this.scrollTop) {
          // 当为滚动到结尾时滚动
          this.scrollTop = this.$refs.forwardScrollBox.scrollTop += 2
        } else {
          // 滚动结束，清除当前定时器，scrollTop重置为0，继续滚动
          this.scrollTop = this.$refs.forwardScrollBox.scrollTop = 0
          clearInterval(this.timer2)
          this.autoScroll()
        }
        console.log('转发数定时器')
      }, 100)
    },
    // 鼠标移入时停止滚动
    mouseenter() {
      clearInterval(this.timer2)
    },
    // 鼠标移开继续滚动
    mouseleave() {
      this.autoScroll()
    },
    // 滚动元素滚动时的方法
    handleScroll(e) {
      console.log(e.target.scrollTop)
    }
  }
}
</script>
<style lang='less' scoped>
.component {
  width: 489px;
  height: 352px;
  padding: 38px 30px 32px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  letter-spacing: 1px;
  .list_dv::-webkit-scrollbar {
    display: none;
  }
  .list_dv {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    font-size: 14px;
    color: #d4eaf6;
    .list_item {
      width: 100%;
      height: 26px;
      margin-bottom: 25px;
      .ico_dv {
        width: 26px;
        height: 26px;
        margin-right: 16px;
        position: relative;
        .num_ico {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 50%;
        }
        span {
          width: 26px;
          height: 26px;
          position: relative;
          line-height: 26px;
          text-align: center;
        }
      }
      h6 {
        width: 110px;
        height: 26px;
        margin-right: 10px;
        line-height: 26px;
      }
      .statistic_dv {
        width: 196px;
        height: 18px;
        margin-right: 21px;
        .forward_base_ico {
          width: 6px;
          height: 18px;
          margin-right: 4px;
        }
        .forward_bg_ico {
          width: 6px;
          height: 18px;
          margin-right: 4px;
          opacity: 0.5;
          background: #164482;
          border-radius: 2px;
        }
      }
      .current_num {
        width: 48px;
        height: 26px;
        font-size: 16px;
        line-height: 26px;
      }
    }
  }
}
</style>