vue2
npm install vue-marquee-text-component@1.2.0vue3
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文章来源：https://www.toymoban.com/news/detail-795586.html
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文章来源地址https://www.toymoban.com/news/detail-795586.html
<!-- parse a unique key for reload the component -->
<marquee-text :key="currentTrack.id">
{{ currentTrack.title }}
</marquee-text>
到了这里，关于【vue】vue跑马灯vue-marquee-text-component的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
