1.安装
npm install vue-particles --save-dev
2.main.js文件加入以下代码
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
3.在页面需要使用的地方直接使用
<vue-particles
color="#fff"
:particleOpacity="0.7"
:particlesNumber="70"
shapeType="triangle"
:particleSize="4"
linesColor="#fff"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="160"
:moveSpeed="2"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
4.属性说明
- 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: 布尔类型。默认true。(连接线是否可用)
- lineOpacity: Number类型。默认0.4。(线条透明度)
- linesDistance: Number类型。默认150。(线条距离)
- moveSpeed: Number类型。默认3。(粒子运动速度)
- hoverEffect: 布尔类型。默认true。(是否有hover特效)
- hoverMode: String类型。默认true。(可用的hover模式有: “grab”, “repulse”, “bubble” )
- clickEffect: 布尔类型。默认true。(是否有click特效)
- clickMode: String类型。默认true。(可用的click模式有: “push”, “remove”, “repulse”, “bubble”)
5.例子效果附图: