Vue跑马灯特效组件（vue-marquee-text-component）的使用

关注

原创最新推荐文章于 2026-03-27 10:55:55 发布 4.7k 阅读 AI 写同款· GEO 优化 ›

vue项目里手动写一个走马灯效果这里走马灯的每一项是一个数组，然后我定死了这个数组放6个派出所，所以我要对后端返给我的数据做分组，也就是在v-for时用的 v-for=“item in Math.ceil(policeList.length / 6)“和v-for=”(item, i) in policeList.slice((item - 1) * 6, item * 6)”，除此之外我还要对“村辅”“辅警”等警务数据进行折叠处理，也就是在对警务人员名单v-for时用的 v-for=“(memberItem, 阅读详情

vue-marquee-text-component是一款vue.js跑马灯特效组件，利用CSS GPU动画为文本创建传统的跑马灯效果

使用方法:

1、在main.js 或者 similar文件中导入组件

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

2.在页面中添加html代码

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

收录于