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

小墨鱼_z2024-01-14 8:42

npm install vue-marquee-text-component@1.2.0

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

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>