最近需要做一个字幕无缝滚动功能，再加上新的项目使用vue3，突然被我找到一个十分牛逼的字幕轮播组件，可以实现跑马灯效果，Vue3 Marquee，目前官方没有中文文档，不过文档也很简单，我整理下使用说明。
安装
# yarn安装
yarn add vue3-marquee@latest
# 或者npm安装
npm install vue3-marquee@latest --save
使用方法
全局引入 Vue3Marquee 组件
import { createApp } from "vue";
import Vue3Marquee from "vue3-marquee";
import "vue3-marquee/dist/style.css";
createApp(App).use(Vue3Marquee).mount("#app");
或者你也可以在局部组件单独引入
<script>
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
export default {
components: {
Vue3Marquee,
},
};
</script>
通过上述两种方式之一引入 Vue3Marquee 后，就可以在组件里直接使用即可
<template>
<vue3-marquee>
<span
v-for="(word, index) in helloArray"
:key="index"
class="word-style"
:class="{ word: true, odd: index % 2 === 0, even: index % 2 === 1 }"
>
{{ word }}
</span>
</vue3-marquee>
</template>
Vue3Marquee还提供一个clone属性，如果子元素没有填满父元素，会自动帮我们填充。简直不要太智能。
引入后的效果如下。
更多的效果可以查看官方demo
除了字幕无缝轮播之外，还支持图片，卡片等元素的无缝滚动轮播，支持边界渐变，鼠标悬停，点击暂停轮等功能。完全满足业务需求，还不快快用起来，早早完成任务，又是可以摸鱼的一天！
