vue3中的文字滚动播报

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

视频被压缩的稀烂了，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 = nullconst displayMessages = computed(() => {const messages = [...props.messages]return [...messages, ...messages]
})watch(() => props.messages,() => {stopMarquee()startMarquee(performance.now())}
)const startMarquee = (timestamp) => {if (!startTime) startTime = timestampconst progress = timestamp - startTimeconst 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() - pausedTimepausedTime = nullstartMarquee(performance.now())}
}const stopMarquee = () => {cancelAnimationFrame(animationId)startTime = nullpausedTime = null
}onMounted(() => {nextTick(() => {marqueeWidth = marqueeRef.value.offsetWidthstartMarquee(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>

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;
}

```

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