它是一个粒子背景插件。
1、安装插件
npm install vue-particles --save-dev
2、在main.js文件中全局引入
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
3、在需要使用粒子背景的组件中使用(一般是首页或者登陆背景中使用)
<template>
<div id="login">
<vue-particles
class="login-bg"
color="#39AFFD"
:particleOpacity="0.7"
:particlesNumber="100"
shapeType="circle"
:particleSize="4"
linesColor="#8DD1FE"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
</div>
</template>
// 根据自己的情况设置样式(一般不需要写,看情况)
<style>
.login{
width: 100%;
height: 100%;
//color: #cccccc;
/*如果想做背景图片 可以给标签一个class 直接添加背景图*/
//position: relative;
}
// 如果屎全屏展示
.login-bg{
width: 100%;
height: 100%;
background: #3E3E3E;
}
</style>
图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动。
一直中意这种动态插件,今天有时间,迫不及待试了一波~ 感觉还挺有逼格的。