安装
npm install vue-particles --save-dev
main.js
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
app.vue
<template>
<div id="app">
<vue-particles
color="#dedede"
:particleOpacity="0.7"
:particlesNumber="80"
shapeType="circle"
:particleSize="4"
linesColor="#dedede"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
</div>
</template>
关于粒子背景覆盖问题可以使用相对绝对布局或者重写对应的css,可以运行一次在浏览器F12查看插件具体的css
demo
<template>
<div id="app">
<input type="text">
<vue-particles color="#FF6600" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
linesColor="#FF6600" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
:moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="particles-js"/>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
#app {
font-family: "Hiragino Sans GB", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #333;
background-color: #FFFFFF;
}
.particles-js{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
input{
margin-top: 100px;
z-index: 999;
position: relative;
}
</style>