vue3-marquee|基于vue3的跑马灯组件

当前位置:主页 > Vue > Vue组件 > vue3-marquee|基于vue3的跑马灯组件
vue3-marquee|基于vue3的跑马灯组件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:01-31
    阅读:
简要教程

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 当您设置了pauseOnHoverpauseOnClick时,通过该事件您可以在跑马灯暂停时,接收到回调事件。
onResume 当您设置了pauseOnHoverpauseOnClick时,通过该事件您可以在跑马灯暂恢复运行时,接收到回调事件。

vue3-marquee官方网站:https://vue3-marquee.vercel.app/guide.html