vue3-marquee 组件属性和事件

安装：
npm install vue3-marquee@latest --save

属性说明

vue3-marquee 组件提供了丰富的属性配置，可以满足各种滚动效果的需求。以下是各属性的详细说明：

基础控制属性

属性名	类型	默认值	说明
direction	String	"normal"	内容移动方向，可选值为 'normal'（正常）或 'reverse'（反向）
duration	Number	20	滚动内容移动容器宽度所需的时间（单位：秒）
delay	Number	0	动画开始前的延迟时间（单位：秒）
loop	Number	0	滚动动画运行次数，0表示无限循环
clone	Boolean	false	是否克隆内容以避免动画中的空隙

视觉效果属性

属性名	类型	默认值	说明
gradient	Boolean	false	是否显示渐变遮罩
gradientColor	Array	[255, 255, 255]	渐变颜色的RGB值数组
gradientLength	String	"200px"	渐变遮罩占据容器边缘的长度

交互控制属性

属性名	类型	默认值	说明
pause	Boolean	false	控制滚动是否暂停的响应式属性
pauseOnHover	Boolean	false	鼠标悬停时是否暂停滚动
pauseOnClick	Boolean	false	鼠标右键点击时是否暂停滚动

方向控制属性

属性名	类型	默认值	说明
vertical	Boolean	false	是否使滚动为垂直方向
animateOnOverflowOnly	Boolean	false	当内容溢出容器时才进行动画

事件说明

vue3-marquee 组件支持多种事件监听，便于实现更复杂的交互逻辑：

动画状态事件

• onComplete: 当滚动动画完成时触发（仅在有限循环次数时有效）
• onLoopComplete: 当滚动完成一次完整循环时触发
• onPause: 当动画因交互（悬停或点击）而暂停时触发
• onResume: 当动画因交互（悬停或点击）而恢复时触发

内容检测事件

• onOverflowDetected: 当内容溢出容器时触发
• onOverflowCleared: 当内容不再溢出容器时触发（可用于添加样式类）