https://github.com/hzzly/vue-particle-line

🌈一个Vue+Cnavas酷炫背景粒子线条
https://github.com/hzzly/vue-particle-line

canvas vue vue-router

Last synced: 11 days ago
JSON representation

🌈一个Vue+Cnavas酷炫背景粒子线条

• Host: GitHub
• URL: https://github.com/hzzly/vue-particle-line
• Owner: hzzly
• Created: 2017-03-21T06:46:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:48:49.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T10:45:19.260Z (15 days ago)
• Topics: canvas, vue, vue-router
• Language: JavaScript
• Homepage: http://hzzly.github.io/vue-particle-line/
• Size: 1.95 MB
• Stars: 516
• Watchers: 12
• Forks: 153
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## vue-particle-line

![NPM version](https://img.shields.io/npm/v/vue-particle-line.svg)

![MIT Licence](https://img.shields.io/npm/l/vue-particle-line.svg)

### 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

  


    

      

    

  


```

### 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   |

### License

MIT