https://github.com/wxh16144/vue-marquee-component

Vue跑马灯组件,支持四个方向滚动
https://github.com/wxh16144/vue-marquee-component

Last synced: about 1 month ago
JSON representation

Vue跑马灯组件,支持四个方向滚动

• Host: GitHub
• URL: https://github.com/wxh16144/vue-marquee-component
• Owner: Wxh16144
• Created: 2020-04-10T12:51:08.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-13T17:59:30.000Z (about 4 years ago)
• Last Synced: 2024-10-10T07:05:13.723Z (about 1 month ago)
• Language: Vue
• Homepage: https://wxh16144.github.io/vue-marquee-component/
• Size: 1.4 MB
• Stars: 67
• Watchers: 3
• Forks: 16
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-marquee-component

[![npm](https://img.shields.io/npm/v/vue-marquee-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-marquee-component)

[![npm](https://img.shields.io/npm/dt/vue-marquee-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-marquee-component)

## Demo

[Demo here](https://wxh16144.github.io/vue-marquee-component/)

## Install

```bash

  npm install vue-marquee-component --save

```

## Usage

The most common use case is to register the component globally.

```js

// in your main.js or similar file

import Vue from 'vue';

import VueMarquee from 'vue-marquee-component';

Vue.use(VueMarquee);

```

Alternatively you can do this to register the components:

```js

// HelloWorld.vue

import { Marquee, Slide } from 'vue-marquee-component';

export default {

  components: {

    [Marquee.name]: Marquee,

    [Slide.name]: Slide

  }

};

```

On your page you can now use html like this:

```html

  

     VUE-MARQUEE-COMPONENT 

  

  

    
{{ i }}

  


  

     VUE-MARQUEE-COMPONENT 

  

  

     👧 ❤️ 👦 

  

  

    

  

```

## Props

| Prop         | Type    | Default            | Description                                        |

| ------------ | ------- | ------------------ | -------------------------------------------------- |

| direction    | string  | left               | Move a few degrees (`left` `right` `top` `bottom`) |

| duration     | Number  | Total length \* 30 | Marquee rolling direction                          |

| showProgress | Boolean | true               | Whether to show the progress bar                   |

## Important information for dynamic content

If you change the content you need reload the component. For this use property `:key` [see more](https://vuejs.org/v2/api/#key)

```html

  

    {{ currentTrack.title }}

  

```