vue-marquee-text-component | 一款基于vue3.x的文字跑马灯组件

vue marquee text component是一款基于vue3.x的文字跑马灯组件。具有CSS GPU动画、快速、功能强大等特点。

使用方法

安装

如果您想使用该文字跑马灯组件，首先您需要安装它，命令如下：

npm install vue-marquee-text-component 
//or 
yarn add vue-marquee-text-component
		

使用

全局引用

// in your main.js or similar file
import Vue from 'vue'
import MarqueeText from 'vue-marquee-text-component'

Vue.component('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>			
		

配置参数props

• duration：动画持续的时间，单位为秒。
• repeat：动画重复的次数。
• paused：指定动画是否正在运行或暂停。
• reverse：将动画反转，即反向播放。

github网址：https://github.com/EvodiaAut/vue-marquee-text-component