演示地址

效果演示地址
演示地址

安装依赖

npm install vue-marquee-component --save

引入

import Vue from 'vue';
import VueMarquee from 'vue-marquee-component';

Vue.use(VueMarquee);

使用

<!-- 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>