自动滚动组件

<template>
  <div
    @mouseover="handlePause"
    @mouseleave="handleMove"
    class="seamless_wrap"
    ref="seamless"
  >
    <div class="scroll" :style="style">
      <div class="scroll_item" ref="item">
        <slot></slot>
      </div>
      <div class="scroll_item" v-show="ih >= wh">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SeamLessScroll",
  data() {
    return {
      timer: null,
      style: {},
      wh: 0, //容器高度
      ih: 0, //内容高度
      scrollH: 0,
      timer2: null,
      times: 0,
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    init() {
      this.wh = Number.parseInt(
        window.getComputedStyle(this.$refs.seamless).height
      );
      this.ih = Number.parseInt(
        window.getComputedStyle(this.$refs.item).height
      );

      if (this.ih >= this.wh) {
        this.handleMove();
      }

      this.timer2 = setTimeout(() => {
        if (this.times == 3 || this.ih) {
          clearTimeout(this.timer2);
        } else {
          this.init();
        }
      }, 200);
    },
    handleMove() {
      this.timer = setTimeout(() => {
        if (this.scrollH < this.ih) {
          this.style = {
            transform: `translateY(-${(this.scrollH += 1)}px)`,
          };
        } else {
          this.style = { transform: "translateY(0)" };
          this.scrollH = 0;
          this.style = {
            transform: `translateY(-${(this.scrollH += 1)}px)`,
          };
          this.scrollH = 1;
        }
        this.handleMove();
      }, 30);
    },
    handlePause() {
      window.clearTimeout(this.timer);
    },
  },
};
</script>

<style scoped>
.seamless_wrap {
  overflow: hidden;
}
</style>