https://github.com/hzzly/canvas-vue

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

canvas vue vue-router

Last synced: 29 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hzzly/canvas-vue
• Owner: hzzly
• Created: 2017-03-21T06:46:44.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:48:49.000Z (over 2 years ago)
• Last Synced: 2025-04-22T09:03:27.378Z (about 1 month ago)
• Topics: canvas, vue, vue-router
• Language: JavaScript
• Homepage: http://hzzly.github.io/vue-particle-line/
• Size: 1.95 MB
• Stars: 519
• Watchers: 12
• Forks: 153
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-vue - canvas-vue - 一个Vue+Cnavas酷炫后台管理 (Demo示例)
• awesome-vue - canvas-vue - vue?style=social) - 一个Vue+Cnavas酷炫后台管理 (Demo示例)
• awesome-github-vue - canvas-vue - 一个Vue+Cnavas酷炫后台管理 (Demo示例)
• awesome - canvas-vue - 一个Vue+Cnavas酷炫后台管理 (Demo示例)

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