vue3-marquee|基于vue3的跑马灯组件
源码介绍
vue3-marquee 是 Vue 3 的一个简单的跑马灯组件,可以创建可定制的跑马灯效果。该组件为您的内容使用插槽,提供多种配置选项来控制跑马灯的效果。 全局使用:在main.js中引入插件。 或者可以在组件中局部调用。 完整代码应该如下所示: vue3-marquee 所有可用的配置参数如下: vue3-marquee 的可用事件如下 vue3-marquee官方网站:https://vue3-marquee.vercel.app/guide.html简要教程
使用方法
安装 & 使用
// npm
npm install vue3-marquee@latest --save
// yarm
yarn add vue3-marquee@latest
// 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,
},
}
配置参数
参数
描述
默认值
可选值
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
事件
事件名称
描述
onComplete
如果您设置了跑马灯的循环次数,可以使用该事件作为结束的回调函数。
onLoopComplete
您可以通过该事件知道跑马灯是否完成了一次循环。
onPause
当您设置了
pauseOnHover
或pauseOnClick
时,通过该事件您可以在跑马灯暂停时,接收到回调事件。
onResume
当您设置了
pauseOnHover
或pauseOnClick
时,通过该事件您可以在跑马灯暂恢复运行时,接收到回调事件。
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » vue3-marquee|基于vue3的跑马灯组件
发表评论 取消回复