vue-marquee-component

Demo

Demo here

Install

  npm install vue-marquee-component --save

Usage

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

// in your main.js or similar file
import Vue from 'vue'
import VueMarquee from 'vue-marquee-component'
 
Vue.use(VueMarquee)

Alternatively you can do this to register the components:

// HelloWorld.vue
import { Marquee, Slide } from "vue-marquee-component"
 
export default {
  components: {
    [Marquee.name]: Marquee,
    [Slide.name]: Slide
  }
}

On your page you can now use html like this:

<!-- simple marquee text -->
<vue-marquee style="height:50px">
  <vue-marquee-slide v-for="i in 30" :key="i">
    <span> VUE-MARQUEE-COMPONENT </span>
  </vue-marquee-slide>
</vue-marquee>
 
<!-- Set different directions -->
<!-- left 、 right 、 top 、bottom  -->
<vue-marquee style="height:150px" direction="right">
  <vue-marquee-slide v-for="i in 30" :key="i">
    <div style="width:200px;height:150px">{{ i }}</div>
  </vue-marquee-slide>
</vue-marquee>
 
<!-- Hide scrollbar -->
<vue-marquee style="height:28px" :showProgress="false">
  <vue-marquee-slide v-for="i in 30" :key="i">
    <span> VUE-MARQUEE-COMPONENT </span>
  </vue-marquee-slide>
</vue-marquee>
 
<!-- fast duration -->
<vue-marquee style="height:28px" :showProgress="false" :duration="52011">
  <vue-marquee-slide v-for="i in 99" :key="i">
    <span style="padding:0 15px"> 👧 ❤️ 👦 </span>
  </vue-marquee-slide>
</vue-marquee>
 
<!-- Insert any node -->
<vue-marquee>
  <vue-marquee-slide v-for="item in list" :key="item.id">
    <!-- The component you want to display -->
  </vue-marquee-slide>
</vue-marquee>

Props

Prop	Type	Default	Description
direction	string	left	Marquee rolling direction
duration	Number	Total length * 30	Move a few degrees (left right top bottom)
showProgress	Boolean	true	Whether to show the progress bar

Important information for dynamic content

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

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