vue通知公告左右不间断循环滚动，鼠标放置停止滚动，移开重新滚动

思路：1.准备两个span标签，设置一个定时器，让两个span标签一起移动，2.当第二个span标签的尾部移动到盒子的尾部，让第一个span标签头部重新回到盒子尾部位置，跟在第二个span标签后面一起移动，3.当第二个span标签的尾部移动到盒子头部，将他的位置设置为0，跟在第一个span标签后，然后不断循环，达到不间断的效果

注意：需要将两个span标签的总宽度大于盒子宽度

通知公告左右滚动

<template>
    <div>
        <div class="dibu2">
            <span id="marquee1">{{ message }}{{ message }}</span>
            <span id="marquee2">{{ message }}{{ message }}</span>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            message: '今天天气好晴朗,处处好风光!今天天气好晴朗,处处好风光!今天天气好晴朗,处处好风光!今天天气好晴朗,处处好风光!',
            marqueeVar: null,
            speed1: 0,
            speed2: 0,
        }
    },
    created() {
        setTimeout(() => {
      this.runMarquee()
    }, 1000)
    },
    methods: {
        //将移动的关键代码移出
        moveMarquee() {
            // 获取内容区宽度
            var width1 = (document.getElementById('marquee1').getBoundingClientRect().width)
            var width2 = (document.getElementById('marquee2').getBoundingClientRect().width)
            //width为第二个span标签尾部到盒子尾部的距离，500为外层盒子的宽度
            var width = width1 + width2 - 500
            var marquee1 = document.getElementById("marquee1");
            var marquee2 = document.getElementById("marquee2");
            this.speed1 = this.speed1 - 1;
            this.speed2 -= 1;
            // 如果speed2的尾部移到盒子的尾部并且speed1的移动距离不超过文字的距离
            if (-this.speed2 >= width && -this.speed1 >= width1) {
                //让speed1重新在原位置移动
                this.speed1 = 500;
            }
            if (-this.speed2 >= width1 + width2) {
                //如果speed2的尾部移动到盒子的头部，让speed2跟在speed1之后移动
                this.speed2 = 0
            }
            marquee1.style.transform = "translateX(" + this.speed1 + "px)";
            marquee2.style.transform = "translateX(" + this.speed2 + "px)";
        },
        runMarquee() {
            var marquee1 = document.getElementById("marquee1");
            var marquee2 = document.getElementById("marquee2");
            this.marqueeVar = setInterval(() => this.moveMarquee(), 30);
            //监听鼠标移入，清空定时器
            marquee1.addEventListener('mouseenter', () => {
                clearInterval(this.marqueeVar);
                this.marqueeVar = null
            })
            marquee2.addEventListener('mouseenter', () => {
                clearInterval(this.marqueeVar);
                this.marqueeVar = null
            })
            //监听鼠标移开，重启定时器
            marquee1.addEventListener('mouseleave', () => {
                this.marqueeVar = setInterval(() => this.moveMarquee(), 30);
            }
            )
            marquee2.addEventListener('mouseleave', () => {
                this.marqueeVar = setInterval(() => this.moveMarquee(), 30);
            }
            )
        }
    },
}
</script>
  
<style>
.dibu2 {
    width: 500px;
    font-size: 0.25rem;
    overflow: hidden;
    white-space: nowrap;
    background: red;
}

#marquee1 {
    display: inline-block;
}

#marquee2 {
    display: inline-block;
}
</style>