vue-rolling-marquee

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

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

中文文档

Run Simple Demo

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

Usage

1. Global Use in Vue-Cli Project

• main.js

import Vue from "vue";
import VueRollingMarquee from "vue-rolling-marquee";

Vue.use(VueRollingMarquee);

new Vue({
  el: "#app",
  render: h => h(App)
});

• App.vue

<template>
  <div id="app">
    <vue-rolling-marquee class="vue-rolling-marquee">Some contents that need to be rolling ...</vue-rolling-marquee>
  </div>
</template>

<style>
  /* Height must be set for vue-rolling-marquee */
  .vue-rolling-marquee {
    height: 400px;
  }
</style>
omit...

2. Direct Use in Vue-Cli Project

• App.vue

<template>
  <div id="app">
    <rolling-marquee>Some contents that need to be rolling ...</rolling-marquee>
  </div>
</template>

<script>
  import RollingMarquee from "vue-rolling-marquee";

  export default {
    name: "App",
      components: {
      RollingMarquee
    }
    omit...
  };
</script>

<style>
  /* Height must be set for vue-rolling-marquee */
  .vue-rolling-marquee {
    height: 400px;
  }
</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)