@marsong11/vue-marquee

vue-marquee

A Vue component to marquee，horizontally scrolling when the text is too long

滚动组件，支持文本过长时横向滚动

Screenshot

Install

npm install @marsong11/vue-marquee

# or
yarn add @marsong11/vue-marquee

Usage

<template>
  <div class="container">
    <marquee :data="list" />
  </div>
</template>

<script>
  import Marquee from '@marsong11/vue-marquee';

  export default {
    components: {
      Marquee
    },
    ,
    data() {
      return {
        list: [
          'data1 some text.',
          'data2 balabalabalabala.',
          'data3 long long long long long long long long long long long text.',
          'data4 hahaha.'
        ]
      };
    }
  };
</script>

Options

Name	Type	Default	Description
data	Array	[]	content
duration	Number	300	duration of transition between items (in ms)
delay	Number	2500	delay between transitions (in ms).
scrollSpeed	Number	60	the speed of the scrolling (keep number low)
pauseOnHover	Boolean	false	pause on hover