在博客页面加了雪花效果的代码,结果无法点击文章和内容了
index.vue
<template>
<el-container>
<div class="background" :style="backgroundImage"></div>
<cmsNavBar></cmsNavBar>
<keep-alive>
<cmsMain></cmsMain>
</keep-alive>
<el-footer height="40px">
<cmsFooter></cmsFooter>
</el-footer>
<!-- 雪花-->
<snow></snow>
</el-container>
</template>
<script>
import cmsMain from './main.vue'
import cmsNavBar from './NavBar.vue'
import cmsFooter from './Footer.vue'
//页面动画效果
import snow from './snow.vue'
// 引入背景图
import backgroundImages from './backgroundImages.js'
export default {
data() {
return {
backgroundImages,
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
components: {
cmsMain,
cmsNavBar,
cmsFooter,
/*雪花*/
snow
},
computed: {
backgroundImage() {
// 根据背景图数组的长度随机选择索引
const randIndex = Math.floor(Math.random() * this.backgroundImages.length)
return {
// 获取对应的图片资源并将其设置到`background-image`属性上
backgroundImage: `url(${this.backgroundImages[randIndex]})`
}
}
},
}
</script>
<style scoped>
.el-footer {
background-color: rgba(84, 92, 100, 0.5);
}
.background {
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
top: 0;
width: 100%;
height: 120vh;
position: fixed;
z-index:-1;
}
@media screen and (max-width: 768px) {
.title {
width: 100%;
background-position-x: center;
background-position-y: 0;
}
}
</style>
相关vue文件
<template>
<div id="main">
<canvas id="canvas" ref="canvas" style="z-index: 100;position: fixed;top: 0;width: 100%;height: 90%;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</div>
</template>
<script>
// import Footer from '@/components/Footer.vue'
export default {
components: {
// Footer
},
data() {
return { //canvas init
canvas: "",
ctx: "",
W: "",
H: "",
angle: 0,
mp: 3000,
particles: [],
t: 0,
}
},
mounted() {
this._initCavas();
},
methods: {
_initCavas() {
this.canvas = document.getElementById("canvas");
this.ctx = this.canvas.getContext("2d");
//canvas dimensions
this.W = window.innerWidth - 30;
this.H = window.innerHeight - 10;
this.canvas.width = this.W;
this.canvas.height = this.H;
//snowflake particles
//雪花数量
this.mp = 500;
this.particles = [];
for (var i = 0; i < this.mp; i++) {
this.particles.push({
x: Math.random() * this.W * 5, //x-coordinate
y: Math.random() * this.H, //y-coordinate
//改变大小
r: Math.random() * 1 + 1, //radius
d: Math.random() * this.mp //density
})
}
clearInterval(localStorage.getItem('interval'));
localStorage.setItem('interval', setInterval(this.draw, 25));
},
draw() {
this.ctx.clearRect(0, 0, this.W, this.H);
this.ctx.fillStyle = "rgba(37, 211, 236)";
this.ctx.fillStyle = "border: 1px solid rgb(37, 211, 236,0.2)";
this.ctx.fillStyle = "box-shadow: 0px 0px 3px rgb(37, 211, 236,0.5)";
this.ctx.beginPath();
for (var i = 0; i < this.mp; i++) {
var p = this.particles[i];
this.ctx.moveTo(p.x, p.y);
this.ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
}
this.ctx.fill();
this.update();
},
update() {
// this.angle += 0.01;
for (var i = 0; i < this.mp; i++) {
var p = this.particles[i];
p.y += Math.cos(this.angle + p.d) + 1 + p.r / 2;
p.x += Math.sin(this.angle) * 2;
if (p.x > this.W || p.x < 0 || p.y > this.H) {
if (i % 3 > 0) {
this.particles[i] = {
x: Math.random() * this.W,
y: -10,
r: p.r,
d: p.d
};
} else {
if (Math.sin(this.angle) > 0) {
//Enter fromth
this.particles[i] = {
x: -5,
y: Math.random() * this.H,
r: p.r,
d: p.d
};
} else {
this.particles[i] = {
x: this.W + 5,
y: Math.random() * this.H,
r: p.r,
d: p.d
};
}
}
}
}
}
}
}
</script>
<style>
#main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 999;
background-repeat: no-repeat;
position: absolute;
background-size: 100% 100%;
}
</style>
我的解答思路和尝试过的方法
想在div中使用style="position: absolute; 和z-index体现层级,但只要无雪花和被雪花阻挡两种结果
我想要达到的结果
两个vue组件相容,既有雪花效果也能点击文章内容