改成vue里使用
<template>
<div class="myLoading">
<div :id="$route.name" class="inner-loading"></div>
</div>
</template>
<script>
export default {
props: {
loading: {
type: Boolean,
default: () => false
}
},
mounted() {
this.$nextTick(() => {
this.initLoading();
});
},
methods: {
initLoading() {
var $ = {};
$.Particle = function (opt) {
this.radius = 7;
this.x = opt.x;
this.y = opt.y;
this.angle = opt.angle;
this.speed = opt.speed;
this.accel = opt.accel;
this.decay = 0.01;
this.life = 1;
};
$.Particle.prototype.step = function (i) {
this.speed += this.accel;
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
this.angle += $.PI / 64;
this.accel *= 1.01;
this.life -= this.decay;
if (this.life <= 0) {
$.particles.splice(i, 1);
}
};
$.Particle.prototype.draw = function (i) {
$.ctx.fillStyle = $.ctx.strokeStyle =
'hsla(' +
($.tick + this.life * 120) +
', 100%, 60%, ' +
this.life +
')';
$.ctx.beginPath();
if ($.particles[i - 1]) {
$.ctx.moveTo(this.x, this.y);
$.ctx.lineTo($.particles[i - 1].x, $.particles[i - 1].y);
}
$.ctx.stroke();
$.ctx.beginPath();
$.ctx.arc(
this.x,
this.y,
Math.max(0.001, this.life * this.radius),
0,
$.TWO_PI
);
$.ctx.fill();
var size = Math.random() * 1.25;
$.ctx.fillRect(
~~(this.x + (Math.random() - 0.5) * 35 * this.life),
~~(this.y + (Math.random() - 0.5) * 35 * this.life),
size,
size
);
};
$.step = function () {
$.particles.push(
new $.Particle({
x: $.width / 2 + (Math.cos($.tick / 20) * $.min) / 2,
y: $.height / 2 + (Math.sin($.tick / 20) * $.min) / 2,
angle: $.globalRotation + $.globalAngle,
speed: 0,
accel: 0.01
})
);
$.particles.forEach(function (elem, index) {
elem.step(index);
});
$.globalRotation += $.PI / 6;
$.globalAngle += $.PI / 6;
};
$.draw = function () {
$.ctx.clearRect(0, 0, $.width, $.height);
$.particles.forEach(function (elem, index) {
elem.draw(index);
});
};
$.init = () => {
$.canvas = document.createElement('canvas'); // 创建一个'canvas'节点
$.ctx = $.canvas.getContext('2d');
$.width = 300;
$.height = 300;
$.canvas.width = $.width * window.devicePixelRatio;
$.canvas.height = $.height * window.devicePixelRatio;
$.canvas.style.width = $.width + 'px';
$.canvas.style.height = $.height + 'px';
$.canvas.style.position = 'absolute';
$.canvas.style.top = '346px';
$.canvas.style.left = '810px';
$.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
$.min = $.width * 0.5;
$.particles = [];
$.globalAngle = 0;
$.globalRotation = 0;
$.tick = 0;
$.PI = Math.PI;
$.TWO_PI = $.PI * 2;
$.ctx.globalCompositeOperation = 'lighter';
const El = document.getElementById(this.$route.name);
El.appendChild($.canvas);
$.loop();
};
$.loop = function () {
requestAnimationFrame($.loop);
$.step();
$.draw();
$.tick++;
};
$.init();
}
}
};
</script>
<style lang="scss" scoped>
.myLoading {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
z-index: 200;
.inner-loading {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
z-index: 3000;
position: relative;
}
}
</style>