演示地址
效果演示地址
演示地址
安装依赖
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>