安装依赖

  "@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>

项目应用

智慧农业数据可视化大屏

水域应急救援可视化平台