动态效果
演示地址
vue3项目在使用particles.js组件的时候会报错，我们需要调整一下让其可以正常运行。
The requested module '/node_modules/.vite/deps/particles__js.js?v=50e5190c' does not provide an export named 'default'
安装依赖
pnpm i particles.js
提取文件
进入node_modules提取particles.js
创建组件
<template>
<div class="particles-container" id="particles-container"></div>
</template>
<script>
import particlesJs from "./particles.js";
export default {
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
particlesJS('particles-container', {
particles: {
number: {
value: 40,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 3,
direction: "none",
random: false,
straight: false,
out_mode: "out",
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true,
config_demo: {
hide_card: false,
background_color: "#b61924",
background_image: "",
background_position: "50% 50%",
background_repeat: "no-repeat",
background_size: "cover"
}
});
},
},
};
</script>
<style scoped>
.particles-container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
修改particles.js
1416行 - 1427行替换
替换前
Object.deepExtend = function(destination, source) {
for (var property in source) {
if (source[property] && source[property].constructor &&
source[property].constructor === Object) {
destination[property] = destination[property] || {};
arguments.callee(destination[property], source[property]);
} else {
destination[property] = source[property];
}
}
return destination;
};
替换后
Object.deepExtend = function f(destination, source) {
for (var property in source) {
if (source[property] && source[property].constructor &&
source[property].constructor === Object) {
destination[property] = destination[property] || {};
f(destination[property], source[property])
} else {
destination[property] = source[property];
}
}
return destination;
};
替换原因
这两段代码是实现对象深度合并（deep merge）的函数，它们的功能基本相同，但在函数的递归调用方式上有所不同。让我们逐步分析它们的区别：
第一段代码：
Object.deepExtend = function(destination, source) {
for (var property in source) {
if (source[property] && source[property].constructor &&
source[property].constructor === Object) {
destination[property] = destination[property] || {};
arguments.callee(destination[property], source[property]);
} else {
destination[property] = source[property];
}
}
return destination;
}
在这段代码中，arguments.callee 是一个指向当前正在执行的函数的引用。在现代 JavaScript 中，不建议使用 arguments.callee，因为它已被标记为过时的特性，并且在严格模式下不可用。
第二段代码：
Object.deepExtend = function f(destination, source) {
for (var property in source) {
if (source[property] && source[property].constructor &&
source[property].constructor === Object) {
destination[property] = destination[property] || {};
f(destination[property], source[property])
} else {
destination[property] = source[property];
}
}
return destination;
}
在这段代码中，函数被命名为 f，并在递归调用中使用了这个名字来代替 arguments.callee。这样做是为了避免使用 arguments.callee，从而提高代码的可读性和可维护性。
总结：
这两段代码的主要区别是函数递归调用的方式，第一段代码使用了 arguments.callee，而第二段代码通过命名函数 f 来代替。在现代 JavaScript 编程中，推荐使用命名函数来代替 arguments.callee，因为它更清晰、更易于理解和维护。
修改particles.js 添加导出
export default window.particlesJS
使用
<template>
<div class="loginPage" id="home">
<Particles/>
</div>
</template>
<script>
import Particles from './components/particles/index.vue';
export default {
data() {
return {}
},
components: {Particles},
mounted: function () {},
computed: {},
methods: {}
}
</script>
<style lang="scss" scoped>
.loginPage {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
z-index: 1;
background: url("assets/bg.jpg") no-repeat;
background-size: 100% 100%;
}
</style>
源码下载
项目基于vue3+vite+js开发，购买代码请确保有相关开发基础
虚拟产品一经售出 概不退款请谅解
