vue跑馬燈實現

鼠標放上去可暫停，當前實現版本是字數長度要超過外層div才會滾動

父界面：

<template>
    <div>
        <el-card style="width: 97%;margin-top: 10px;margin-left: 22px;" >
           <marque style="width: 100%;height: 30px;color: red;font-size: 18px;margin-left: 10px;"  :lists="['這是一個很長很長很長的跑馬燈']" ></marque>
        </el-card>
    </div>
</template>
<script>
　　import marque from '@/components/marque'

　　export default {
      components: {
　　　　　　marque
　　　　}
　　}
</script

 

子界面，（跑馬燈組件）

<template>
    <div class="marquee-wrap" @mouseover='stopInter' @mouseleave='startInter'>
        <!-- 滾動內容 -->
        <div class="scroll" style=" text-shadow:#ffc773 0 1px 8px;color: #ed5736;">
            <p class="marquee">{{text}}</p>
            <!-- 文字副本 -->
            <p class="copy"></p>
        </div>
        <!-- 為了計算總文本寬度，通過css在頁面中隱藏 -->
        <p class="getWidth">{{text}}</p>
    </div>
</template>

<script>
    export default {
        props: ['lists'], // 父組件傳過來的數組
        data () {
            return {
                timer: null,
                text: '',
                intervalStop: false
            }
        },
        created () {
            // 進入頁面等一秒才開始滑動
            let timer = setTimeout(() => {
                this.move()
                clearTimeout(timer)
            }, 1000)
        },
        // 把父組件傳入的arr轉化成字符串， 本次是傳入一個，在此處重復了三次來獲取足夠的長度
        mounted () {
            for (let item of this.lists) {
                this.text += ' ' + item + `      ` + item + `      `+ item
            }
        },
        methods: {
            stopInter() {
                this.intervalStop = true;
            },
            startInter() {
                this.intervalStop = false;
            },
            move () {
                let maxWidth = document.querySelector('.marquee-wrap').clientWidth
                // 獲取文字text 的計算后寬度 （由於overflow的存在，直接獲取不到，需要獨立的node計算）
                let width = document.querySelector('.getWidth').scrollWidth
                // 如果文本內容的寬度小於頁面寬度，則表示文字小於等於一行，則不需要滾動
                if (width <= maxWidth) return
                let scroll = document.querySelector('.scroll')
                let copy = document.querySelector('.copy')
                copy.innerText = this.text // 文字副本填充
                let distance = 0 // 位移距離
                // 設置位移
                this.timer = setInterval(() => {
                    if (!this.intervalStop) {
                        distance -= 1
                        // 如果位移超過文字寬度，則回到起點
                        if (-distance >= width) {
                            distance = 10 // 距離必須與marquee的margin寬度相同
                        }
                        scroll.style.transform = 'translateX(' + distance + 'px)'
                    }
                }, 20)
            }
        },
        beforeDestroy () {
            // 清除計時器
            clearInterval(this.timer)
        }
    }
</script>
<style scoped lang='less'>
    .marquee-wrap {
        width: 100%;
        overflow: hidden;
        position: relative;
        .scroll {
            display: flex;
            p{
                word-break:keep-all; // 不換行
                white-space:nowrap;
                /* 設置前后間隔 */
                &.marquee {
                    margin-right: 32px;
                }
            }
        }
        /* 僅為了獲取寬度，故隱藏掉 */
        .getWidth {
            word-break:keep-all; // 不換行
            white-space:nowrap;
            position: absolute;
            opacity: 0;
            top: 0;
        }
    }
</style>

 

參考：https://blog.csdn.net/weixin_43931876/article/details/90046945