vue3-marquee|基于vue3的跑马灯组件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

vue3-marquee 是 Vue 3 的一个简单的跑马灯组件，可以创建可定制的跑马灯效果。该组件为您的内容使用插槽，提供多种配置选项来控制跑马灯的效果。

使用方法

安装 & 使用

// npm
npm install vue3-marquee@latest --save

// yarm
yarn add vue3-marquee@latest

全局使用：在main.js中引入插件。

// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'

createApp(App).use(Vue3Marquee).mount('#app')

或者可以在组件中局部调用。

import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'

export default {
  components: {
    Vue3Marquee,
  },
}

完整代码应该如下所示：

配置参数

vue3-marquee 所有可用的配置参数如下：

参数	描述	默认值	可选值
direction	`"normal"`	跑马灯的移动反向。"normal"表示从右到左,"reverse"表示从左到右。	""normal"" \| "reverse"
duration	跑马灯在容器中运行一次的时长，单位秒。	20	大于0的整数值
delay	跑马灯动画开始前的延迟时间，单位秒。	0	大于等于0的整数值
loop	跑马灯的循环次数，0表示无限次数。	0	大于等于0的整数值
gradient	是否在两侧显示渐变遮罩。	false	true \| false
gradientColor	渐变遮罩的RGB颜色。	[255, 255, 255]	任意RGB颜色
gradientWidth	渐变遮罩的宽度。	200px	任意css长度单位
pauseOnHover	是否在鼠标悬停时暂停跑马灯动画。	false	false \| true
pauseOnClick	是否在鼠标点击时暂停跑马灯动画。	false	false \| true

事件

vue3-marquee 的可用事件如下

事件名称	描述
onComplete	如果您设置了跑马灯的循环次数，可以使用该事件作为结束的回调函数。
onLoopComplete	您可以通过该事件知道跑马灯是否完成了一次循环。
onPause	当您设置了`pauseOnHover`或`pauseOnClick`时，通过该事件您可以在跑马灯暂停时，接收到回调事件。
onResume	当您设置了`pauseOnHover`或`pauseOnClick`时，通过该事件您可以在跑马灯暂恢复运行时，接收到回调事件。