🌈 Vue 跑马灯

✨ 在线演示

🎈 开源地址

Github | Gitee

📖 介绍

AringVueMarquee 是一个类似 LED 滚动灯效果的小组件，通过 CSS3 Animation + Transform 方案来实现文本滚动以适应移动端，并减轻间隔器方案造成的性能损耗。

您可以自定义 颜色/尺寸/点击事件 等来满足您的业务需求。

📦 安装

npm install aring-vue-marquee -S

🔨 使用

全局引用

在main.js中

import VueMarquee from 'aring-vue-marquee';
Vue.use(VueMarquee);

组件内引用

<template>
  <vue-marquee>
    <span>此处定义滚动内容</span>
  </vue-marquee>
</template>
<script>
  import VueMarquee from 'aring-vue-marquee';
  export default {
    components: { VueMarquee }
  };
</script>

🎨API

Attributes

参数	类型	可选值	默认值	说明
speed	Number	——	10	滚动速度，默认 10，大于 10 则更快，小于 10 则更慢
direction	String	up/right/down/left	left	滚动方向
delayTime	Number	——	500	滚动间隔时间，单位 ms
color	String	——	#333	文本颜色
cursor	String	——	text	鼠标放置文本时的光标
size	String	small/large	——	尺寸
mouseover	Blooean	——	true	是否允许鼠标移入暂停滚动

Event

事件名称	说明	回调参数
click	可在@click 中自定义点击文本的事件	——

Methods

方法	说明
stopRoll	停止滚动
continueRoll	继续滚动
reset	重置

Slot

插槽名	说明
(default)	插入滚动内容
icon	前置小图标