vue使用vue-particles粒子动效

安装插件：

npm install vue-particles --save

main.js中全局引入：

import VueParticles from 'vue-particles';
Vue.use(VueParticles);

在对应组件中引用粒子组件：

<div class="CanvasBackStyle">
  <vue-particles
    color="#d9d9d9"
    shapeType="polygon"
    linesColor="#cdcdcd"
    :lineOpacity="0.8"
    :linesDistance="200"
    hoverMode="grab"
    clickMode="repulse"
    class="lizi"
  >
  </vue-particles>
</div>

样式根据需求自行设置：

.CanvasBackStyle {
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
}
.lizi {
  width: 100%;
  height: 100%;
}

实现效果：

vue-particles组件中的配置项：

属性	类型	默认值	可选值	备注
color	String	#dedede	-	颜色
particleOpacity	Number	0.7	-	粒子透明度
particlesNumber	Number	80	-	粒子数量
shapeType	String	circle	circle:圆形、edge:方形、triangle:三角形、polygon:五边形、star:星形	粒子样式
particleSize	Number	80	-	粒子大小
linesColor	String	#dedede	-	线条颜色
linesWidth	Number	1	-	线条宽度
lineLinked	Boolean	true	-	连线是否可用
lineOpacity	Number	0.4	-	线条透明度
linesDistance	Number	150	-	线条距离
moveSpeed	Number	3	-	粒子移动速度
hoverEffect	Boolean	true	-	是否有悬停特效
hoverMode	String	grab	grab:牵引、repulse:驱散、bubble:泡沫	悬停交互动作
clickEffect	Boolean	true	-	是否有点击特效
clickMode	String	push	push:增加粒子、remove:删除粒子、repulse:驱散、bubble:泡沫	点击交互动作

注意：使用vue-particles插件时，建议工程化工具使用webpack，使用vite会报require错误。