
安装依赖
"@tsparticles/slim": "^3.8.1",
"@tsparticles/vue3": "^3.0.1",
main.js引入
import Particles from "@tsparticles/vue3";
import { loadSlim } from "@tsparticles/slim";
const app = createApp(App)
app.use(Particles, {
init: async engine => {
await loadSlim(engine);
},
})
使用
<template>
<vue-particles
id="tsparticles"
:options="particlesOptions"
@particles-loaded="particlesLoaded"
/>
</template>
<script setup lang="ts">
const particlesOptions = {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 950,
},
},
color: {
value: "#61e459",
},
shape: {
type: "circle",
},
opacity: {
value: 0.5,
random: false,
},
size: {
value: 3,
random: true,
},
links: { // 关键修改:`line_linked` 已弃用,改用 `links`
enable: true, // 确保启用连线
distance: 150, // 粒子间最大连线距离
color: "#61e459",
opacity: 0.4,
width: 1,
},
move: {
enable: true,
speed: 3,
direction: "none",
random: false,
straight: false,
out_mode: "out", // 注意:新版可能已弃用,建议用 `outMode`
bounce: false,
},
},
interactivity: {
detect_on: "canvas", // 注意:新版可能用 `detectOn`
events: {
onHover: { // 注意:驼峰命名(`onHover` 而非 `onhover`)
enable: true,
mode: "grab", // 可改为 "repulse" 或 "connect"
},
onClick: { // 注意:驼峰命名(`onClick` 而非 `onclick`)
enable: true,
mode: "push",
},
resize: true,
},
},
retina_detect: true,
};
const particlesLoaded = (container: any) => {
console.log("Particles loaded!", container);
};
</script>
<style lang="scss">
#tsparticles {
position: fixed;
width: 100%;
height: 100%;
z-index: 0;
background: transparent; /* 可选:确保背景透明 */
}
</style>