Vue3 走马灯Vue3Marquee组件库的使用 文字走马灯 公告栏

介绍

Vue3Marquee 是一个用于在 Vue 3 项目中创建跑马灯（Marquee）效果的组件库，常见于网站的公告，如文字太长可以考虑使用该组件让文字进行滚动， 当然不止是文字 元素也可以。

项目地址

https://gitcode.com/gh_mirrors/vu/vue3-marquee/overview?utm_source=artical_gitcode&index=top&type=card&webUrl&isLogin=1

安装

npm install vue3-marquee@latest --save

全局注册

// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
createApp(App).use(Vue3Marquee).mount('#app')

局部注册

import { Vue3Marquee } from 'vue3-marquee'

  <Vue3Marquee class="tips-box">
  公告：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 </Vue3Marquee>

配置项

direction ‘normal’ 或 ‘reverse’ 字符串 “normal” 内容移动的方向
duration 数字 20 动画内容移动容器宽度所需的时间（以秒为单位）
delay 数字 0 动画开始前的延迟时间（以秒为单位）
loop 数字 0 动画应运行的次数（0 表示无限循环）
gradient 布尔值 false 是否显示渐变覆盖层
gradientColor 三个 RGB 值的数组 [255, 255, 255] 渐变颜色的 RGB 颜色
gradientLength 字符串 200px 渐变覆盖层占据容器边缘的长度部分
pause 布尔值 false 反应式属性，暂停滚动动画
pauseOnHover 布尔值 false 是否在悬停时暂停滚动动画
pauseOnClick 布尔值 false 是否在右键点击时暂停滚动动画
clone 布尔值 false 如果希望动画中没有空隙，则复制内容
vertical 布尔值 false 是否使滚动变为垂直方向
animateOnOverflowOnly 布尔值 false 当内容溢出容器时是否启动动画