vue2

npm install vue-marquee-text-component@1.2.0

vue3

npm install vue-marquee-text-component

安装完成之后，vue页面全局引入

import Vue from 'vue'
import MarqueeText from 'vue-marquee-text-component'Vue.component('marquee-text', MarqueeText)

页面引入

import MarqueeText from 'vue-marquee-text-component'export default {name: 'HelloWorld',components: {MarqueeText}
}

例子：

<!-- simple marquee text -->
<marquee-text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
</marquee-text><!-- short text need more duplicates -->
<marquee-text :repeat="10">Short text =(
</marquee-text><!-- slow duration -->
<marquee-text :duration="30">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
</marquee-text>

props

Prop	Type	Default	Description
duration	Number	15	Animation Duration
repeat	Number	2	Number of repeat the Slot (It's important for to short content)
paused	Boolean	false	The property specifies whether the animation is running or paused
reverse	Boolean	false	Set animation-direction to reverse

<!-- parse a unique key for reload the component  -->
<marquee-text :key="currentTrack.id">{{ currentTrack.title }}
</marquee-text>