vue-rolling-marquee

这是一个 Vue 组件，提供一个自动滚动的字幕(跑马灯)。

This is a Vue component that provides an auto-scrolling marquee.

中文文档

Run Simple Demo

1$ git clone https://github.com/SuperYesifang/vue-rolling-marquee.git
2$ cd vue-rolling-marquee
3$ npm install
4$ npm run dev

Usage

1. Global Use in Vue-Cli Project

• main.js

1import Vue from "vue";
2import VueRollingMarquee from "vue-rolling-marquee";
3
4Vue.use(VueRollingMarquee);
5
6new Vue({
7  el: "#app",
8  render: h => h(App)
9});

• App.vue

1<template>
2  <div id="app">
3    <vue-rolling-marquee class="vue-rolling-marquee">Some contents that need to be rolling ...</vue-rolling-marquee>
4  </div>
5</template>
6
7<style>
8  /* Height must be set for vue-rolling-marquee */
9  .vue-rolling-marquee {
10    height: 400px;
11  }
12</style>
13omit...

2. Direct Use in Vue-Cli Project

• App.vue

1<template>
2  <div id="app">
3    <rolling-marquee>Some contents that need to be rolling ...</rolling-marquee>
4  </div>
5</template>
6
7<script>
8  import RollingMarquee from "vue-rolling-marquee";
9
10  export default {
11    name: "App",
12      components: {
13      RollingMarquee
14    }
15    omit...
16  };
17</script>
18
19<style>
20  /* Height must be set for vue-rolling-marquee */
21  .vue-rolling-marquee {
22    height: 400px;
23  }
24</style>

Options

Some Vue prop options to config vue-rolling-marquee.

prop	description	type	default
direction	Direction of rolling. (accept: "top”,”right”,”bottom”,”left” or CSS3 rotate angle,example 30deg)	String	"left"
speed	Speed of rolling. (unit: pixel/s, remark: Must be a positive number)	Number	30
duration	The time of a full rolling.	Number
shadow	Turn on shadow shuttle effect.	Boolean	true
prompt	Turn on teleprompter mode.	Boolean	false
promptGap	The width of the gap between the shuttle part and the unshuttle part of the content block. (unit: pixel)	Number	20
rid	The unique ID of the running lantern is used to prevent conflicts between multiple running lights. It is usually automatically generated by components without artificial settings.	Number、String

Detailed Options

Describe Prop Options in detail

direction

This prop option is used to configure marquee rolling direction.

• Support accept some keywords: "left"，"right", "bottom", "left".
• Support setting angle is simiar to CSS3 transform rotate, example: "45deg", "-128deg".

Table of the meaning of keywords:

keyword	description	equivalent angle
"top"	rolling to top	"0deg"
"right"	rolling to right	"90deg"
"bottom"	rolling to bottom	"180deg"
"left"	rolling to left	"270deg"

speed & duration

Both prop options are used to control the speed of scrolling. speed is prior than duration.

• speed: Setting the speed of rolling. (unit：pixel/s, default: 30)
• duration: Setting the time it takes to rolling once. (unit: ms)

shadow

Turn on shadow shuttle effect. When the content block is out of the display area, shuttle into it from the opposite side.

prompt

Turn on teleprompter mode. When the content block does not exceed the display area, it appears as normal content. When the display area is exceeded,will be as rolling marquee, similar to a teleprompter.

promptGap

When teleprompter mode turnd on. The width of the gap between the shuttle part and the unshuttle part of the content block. (unit: pixel)