# vue-particle-line

**Repository Path**: microl/vue-particle-line

## Basic Information

- **Project Name**: vue-particle-line
- **Description**: 一个Vue+Cnavas酷炫背景粒子线条
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-06-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vue-particle-line

### How to use
```
npm install vue-particle-line --save
```

### Main.js file
```javascript
import Vue from 'vue'
import vueParticleLine from 'vue-particle-line'
import 'vue-particle-line/dist/vue-particle-line.css'
Vue.use(vueParticleLine)
```

### App.vue file - Simple example
```html
<template>
  <div id="app">
    <vue-particle-line>
      <router-view />
    </vue-particle-line>
  </div>
</template>
```

### Props

| Prop         | Type    | Default  | Description   |
| -------      | -----   | :------: |  -----------  |
| lineWidth    | Number  |  0.3     |  connect line width   |
| dotsNumber   | Number  |  100     |  dot number   |
| dotsDistance | Number  |  100     |  far as points to connect   |
| hoverEffect  | Boolean |  true    |  mouse hover events   |