动态背景组件(vue-particles)
启用 vue-particles 粒子背景插件(main.js)
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
动态背景组件(AnimatedWallpaper.vue)
<template>
<div :style="style">
<vue-particles
color="#ffffff"
:particleOpacity="0.7"
:particlesNumber="number"
shapeType="circle"
:particleSize="3"
linesColor="#E6E6FA"
:linesWidth="1"
:lineLinked="linked"
:lineOpacity="0.6"
:linesDistance="150"
:moveSpeed="speed"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
:clickMode="mode"
>
</vue-particles>
<slot></slot>
</div>
</template>
<script>
export default {
name: "AnimatedWallpaper",
props: {
bgImg: {
type: String,
default: require('@/assets/nap.jpg')
},
number: {
type: Number,
default: 50 // 100
},
linked: {
type: Boolean,
default: true // false
},
speed: {
type: Number,
default: 6 // 8
},
mode: {
type: String,
default: "push" // "repulse"
}
},
data() {
return {
style: {
background: 'url(' + this.bgImg + ') no-repeat top',
backgroundSize: 'cover',
backgroundAttachment: 'fixed',
height: '100%',
width: '100%',
position: 'fixed',
overflow: 'scroll',
zIndex: -99999
}
}
}
}
</script>
<style scoped>
#particles-js {
position: fixed;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: -99998;
}
::-webkit-scrollbar {
display: none;
}
</style>
使用方式
<template>
<div>
<!-- <animated-wallpaper />-->
<!-- <animated-wallpaper :bg-img="require('@/assets/20_21.jpg')" />-->
<animated-wallpaper
:number="100"
:linked="false"
:speed="8"
mode="repulse"
:bg-img="require('@/assets/Emilia.jpg')"
/>
</div>
</template>
<script>
import AnimatedWallpaper from "@/components/AnimatedWallpaper";
export default {
name: "Trial",
components: {
AnimatedWallpaper
}
}
</script>
<style scoped>
</style>
效果图