【vue】vue跑马灯vue-marquee-text-component

vue2

复制代码
npm install vue-marquee-text-component@1.2.0

vue3

npm install vue-marquee-text-component

安装完成之后,vue页面全局引入

复制代码
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
  }
}

例子:

复制代码
<!-- 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>

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
复制代码
<!-- parse a unique key for reload the component  -->
<marquee-text :key="currentTrack.id">
  {{ currentTrack.title }}
</marquee-text>
相关推荐
snowbitx3 分钟前
一篇文章彻底搞懂前端架构层面分层设计
前端·设计模式·前端框架
Keepreal4965 分钟前
React组件生命周期,各个生命周期可以进行什么操作以及如何使用useEffect模拟组件生命周期
前端·react.js
JiKun6 分钟前
ECMA 2025(ES16) 新特性
前端·javascript
一路上__有你10 分钟前
闲来无事,写一篇文章吧!
前端·javascript·vue.js
keep_di11 分钟前
05-vue3+ts中axios的封装
前端·vue.js·ajax·typescript·前端框架·axios
JiKun26 分钟前
ECMA 2024(ES15) 新特性
前端·javascript
0__O32 分钟前
细说 new Function
javascript
百锦再33 分钟前
从 .NET 到 Java 的转型指南:详细学习路线与实践建议
android·java·前端·数据库·学习·.net·数据库架构
i小杨1 小时前
前端埋点(打点)方案
前端·状态模式
前端加油站1 小时前
时间转换那些事
前端·javascript