vue-cli3.x在vue中使⽤⾛马灯，⽂本滚动安装插件vue-marquee-text-component
npm install vue-marquee-text-component
or
yarn add vue-marquee-text-component
在main.js中使⽤
// in your main.js or similar file
import Vue from 'vue'
import MarqueeText from 'vue-marquee-text-component'
Vueponent('marquee-text', MarqueeText)
或者在单个⽂件中使⽤
// HelloWorld.vue
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>
marquee marquee传参props
Prop Type Default Description
duration Number15Animation Duration
repeat Number2Number 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 animati
on-direction to reverse
实际使⽤中 如果出现滚动时候内部遮挡滚动 加⼀段css
.marquee-text-wrap {
overflow: visible;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。