VUE 文字跑马灯（文本滚动）

<!-- 文字跑马灯 -->
<template>
  <div class="wrap">
        <div ref="box" class="box">
            {{text}}
        </div>
  </div>
</template>
<script>
export default {
    data () {
        return {
            timer: null,
            text: '文本滚动',
        }
    },
    methods: {
        startText () {
            if(this.timer != null) return;
            let width = this.getLenPx(this.text, 26)
            let distance = 400; // 设为0从左侧开始播放
            this.timer = setInterval(() => {
                distance = distance - 1;
                // 如果位移超过文字宽度，则回到起点
                if (-distance >= width) {
                    distance = 400
                }
                this.$refs.box.style.transform = 'translateX(' + distance + 'px)';
            }, 10)
        },
        stopText () {
            //清除定时器
            clearInterval(this.timer)
            //清除定时器之后，需要重新将定时器置为null
            this.timer = null
        }, 
        // 获取字符串占位px
        getLenPx(str, font_size) {
            var str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length;
            return str_leng * font_size / 2
        }
        
    },
    mounted () {
        this.startText()
    },
    destroyed () {
        this.stopText()
    }
}
</script>

<style lang='scss' scoped>
.wrap {
    width: 400px;
    overflow: hidden;
}

.box {
    width: 8000%;
    overflow: hidden;
}
</style>

网上有好多例子，总觉得不太好，自己改了改，还算满意，不足之处欢迎各位指出。（为了方便大家做了稍微改动）

下面是我没改动代码

<!-- 文字跑马灯 -->
<template>
  <div class="wrap">
        <div ref="box" class="box">
            {{element.propValue[0]}}
        </div>
  </div>
</template>
<script>
export default {
    data () {
        return {
            timer: null
        }
    },
    props: {
        element: {
            type: Object,
        },
    },
    methods: {
        startText () {
            if(this.timer != null) return;
            let width = this.getLenPx(this.element.propValue[0], this.element.style.fontSize)
            let distance = this.element.style.width; // 设为0从左侧开始播放
            this.timer = setInterval(() => {
                distance = distance - 1;
                // 如果位移超过文字宽度，则回到起点
                if (-distance >= width) {
                    distance = this.element.style.width
                }
                this.$refs.box.style.transform = 'translateX(' + distance + 'px)';
            }, 10)
        },
        stopText () {
            //清除定时器
            clearInterval(this.timer)
            //清除定时器之后，需要重新将定时器置为null
            this.timer = null
        }, 
        // 获取字符串占位px
        getLenPx(str, font_size) {
            var str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length;
            return str_leng * font_size / 2
        }
        
    },
    mounted () {
        this.startText()
    },
    destroyed () {
        this.stopText()
    }
}
</script>

<style lang='scss' scoped>
.wrap {
    overflow: hidden;
}

.box {
    width: 8000%;
    overflow: hidden;
}
</style>