vue3中的文字滚动播报

vue3中的文字滚动播报

纯手写方案

之前UI框架一直使用的elementPlus，有个需求，需要在页面上写个滚动播放新闻的功能，发现UI框架居然没有这个组件。花了一下午，在ChatGPT的帮助下，总算写成功了，先看最终展示效果

web页面滚动播放文字

视频被压缩的稀烂了，GIF又没法上传，截个图看看吧

直接上代码：

<template>
    <div class="marquee-container">
        <div class="marquee" ref="marqueeRef">
            <span v-for="(message, index) in displayMessages" :key="index" class="marquee-item"
                @mouseenter="pauseMarquee" @mouseleave="resumeMarquee">
                {{ message }}&nbsp;&nbsp;
            </span>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue'

const props = defineProps({
    messages: {
        type: Array,
        required: true
    },
    duration: {
        type: Number,
        default: 3000
    }
})

const marqueeRef = ref(null)
let marqueeWidth = 0
let animationId = null
let startTime = null
let pausedTime = null

const displayMessages = computed(() => {
    const messages = [...props.messages]
    return [...messages, ...messages]
})

watch(
    () => props.messages,
    () => {
        stopMarquee()
        startMarquee(performance.now())
    }
)

const startMarquee = (timestamp) => {
    if (!startTime) startTime = timestamp
    const progress = timestamp - startTime
    const distance = marqueeWidth - (progress * (marqueeWidth / props.duration)) % (2 * marqueeWidth)
    marqueeRef.value.style.transform = `translateX(${distance}px)`
    animationId = requestAnimationFrame(startMarquee)
}

const pauseMarquee = () => {
    if (animationId) {
        pausedTime = performance.now()
        cancelAnimationFrame(animationId)
        animationId = null
    }
}

const resumeMarquee = () => {
    if (pausedTime) {
        startTime += performance.now() - pausedTime
        pausedTime = null
        startMarquee(performance.now())
    }
}

const stopMarquee = () => {
    cancelAnimationFrame(animationId)
    startTime = null
    pausedTime = null
}

onMounted(() => {
    nextTick(() => {
        marqueeWidth = marqueeRef.value.offsetWidth
        startMarquee(performance.now())
    })
})

onUnmounted(() => {
    stopMarquee()
})
</script>

<style scoped>
.marquee-container {
    width: 100%;
    height: 28px;
    overflow: hidden;
    white-space: nowrap;
}

.marquee {
    display: inline-flex;
    padding-right: 100%;
    box-sizing: border-box;
}

.marquee-item {
    padding-left: 2rem;
    line-height: 28px;
    font-weight: bold;
    /* font-size: 18px; */
}
</style>

代码挺复杂的，不想自己都还没完全理解清楚，以后有需求就这么用吧

看看组件中的用法

<template>
    <div class="container stock">
        <div class="wrap" v-if="showNotice">
            <div class="close" title="关闭此消息" @click="closeNotice">
                <el-icon>
                    <CircleClose />
                </el-icon>
            </div>
            <div class="stock-info">
                <NoticeBar :messages="message"></NoticeBar>
            </div>
        </div>
    </div>
</template>

<script setup>
import NoticeBar from '@/components/NoticeBar.vue';
import { ref } from 'vue'


const message = [
        '千古江山，英雄无觅，孙仲谋处。舞榭歌台，风流总被，雨打风吹去。斜阳草树，寻常巷陌，人道寄奴曾住。想当年，金戈铁马，气吞万里如虎。元嘉草草，封狼居胥，赢得仓皇北顾。四十三年，望中犹记，烽火扬州路。可堪回首，佛狸祠下，一片神鸦社鼓。凭谁问：廉颇老矣，尚能饭否？'

]
const showNotice = ref(true)
const closeNotice = () => {
    showNotice.value = false
}

</script>

<style lang="scss" scoped>
.stock {
    position: relative;
    display: flex;

}

.wrap {
    position: absolute;
    bottom: 1px;
    width: 100%;
    background-color: #eee;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    .close {
        position: absolute;
        right: 20px;
        z-index: 101;
        cursor: pointer;
        background-color: #fff;
    }
}

.stock-info {

    width: 99%;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    // border-radius: 40px;
    z-index: 100;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

</style>

父组件中只需要向子组件传递message消息即可

使用组件方案

以下是2024年3月21日更新
以上的代码发现一直不太好使，滚动的速度太快，消失和出现中间的时差不好控制
后来发现原来有现成的组件库可用
那就是Vue Amazing UI
使用起来也很简单，看最终展示效果

不仅支持横向的文字滚动，还能支持垂直文字滚动，也支持多条信息滚动，而且调用也很简单
简单介绍一下使用方案

1. 项目中安装使用npm add vue-amazing-ui
2. 引用组件，个人推荐用局部导入，因为我的项目用的UI框架是elementplus，如果全局引入的话，可能会和其他UI组件冲突。局部引入只需要两步(以TextScroll为例，即文字滚动)，一是引入组件，二是引入样式文件：

import { TextScroll } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'

3. 使用组件

<TextScroll :scrollText="singleText" single :font-size="20" :font-weight="800" style="height: 100%;" />

singleText是一个对象，至少要包含title，如下：

const singleText = {
    title: '请用一只玫瑰纪念我...',
    link: 'https://blog.csdn.net/Dandrose?type=blog'
}

其他api如下