vue-marquee-box

npm install vue-marquee-box or yarn add vue-marquee-box

Usage

The most common use case is to register the component globally.

1// in your main.js or similar file
2import Vue from 'vue'
3import MarqueeText from 'vue-marquee-box'
4
5Vue.component('marquee-text', MarqueeText)

Alternatively you can do this to register the components:

1// HelloWorld.vue
2import MarqueeText from 'vue-marquee-box'
3
4export default {
5  name: 'HelloWorld',
6  components: {
7    MarqueeText
8  }
9}

On your page you can now use html like this:

1<!-- simple marquee text -->
2<marquee-text>
3  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
4</marquee-text>
5
6<!-- short text need more duplicates -->
7<marquee-text :repeat="10">
8  Short text =(
9</marquee-text>
10
11<!-- slow duration -->
12<marquee-text :duration="30">
13  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
14</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
vertical	Booolean	false	set animation vertical

Important information for dynamic content

If you change the content you need reload the component. For this use property :key see more

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

Build Setup

1yarn install
2yarn run serve
3yarn run build
4yarn run lint