vue-particles

1
2
3
4
5
6
这个组件用来当背景，十分炫酷好用于是于此乎这里加上一点点简单的使用教程

### vue-particles的安装

```bash
npm install vue-particles --save-dev

之后就可以在main.js中引用组件了

1
2
3
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
Name Type Default Description
color String #dedede Particle color
particleOpacity Number 0.7 Particle opacity
particlesNumber Number 80 Amount of particles
shapeType String “circle” Available shape types: “circle”,”edge”,”triangle”, “polygon”,”star”
particleSize Number 4 Size of single particle
linesColor String #dedede Lines color
linesWidth Number 1 Lines width
lineLinked Boolean true Enable lines
lineOpacity Number 0.4 Line opacity
linesDistance Number 150 Lines distance
moveSpeed Number 3 Particles speed
hoverEffect Boolean true Enable hover effect
hoverMode String grab Available hover modes: “grab”, “repulse”, “bubble”
clickEffect Boolean true Enable click effect
clickMode String push Available click modes: “push”, “remove”, “repulse”, “bubble” 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
  <div id="app">
    <vue-particles
      :color="['#B0C4DE', '#6495ED', '#7B68EE']"
      :particleOpacity="0.7"
      :particlesNumber="200"
      :shapeType="'circle'"
      :particleSize="4"
      :linesColor="'#D3D3D3'"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      :hoverMode="'repulse'"
      :clickEffect="true"
      :clickMode="'push'"
      style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"
    />
    <div id="content">
      /* 这里放入其他组件 */
    </div>
      
    
    <!-- <NewsFatVue></NewsFatVue> -->
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
    // NewsFatVue

  }
}
</script>

<style>
#app {
  position: relative; /* 添加这一行 */
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#content {
  position: relative; /* 保持内容的相对定位，以便能够覆盖粒子背景 */
  z-index: 1; /* 将内容放置在粒子背景之上 */
}
</style>

就可以了,效果如图所示

效果图