particles在vue3中的基本使用

1.安装插件

npm i particles.vue3
npm i tsparticles

2.在main.js中引入

import Particles from 'particles.vue3'
app.use(Particles) // 配置相关的文件

3.页面使用组件

<Particles
    id="tsparticles"
    :particlesInit="particlesInit" // 此处引入的需要在setup中定义
    :particlesLoaded="particlesLoaded" // 此处引入的需要在setup中定义
    :options="{
      background: {
        color: {
          value: "",
        },
      },
      fpsLimit: 120,
      interactivity: {
        events: {
          onClick: {
            enable: true,
            mode: "push",
          },
          onHover: {
            enable: true,
            mode: "grab",
          },
          resize: true,
        },
        modes: {
          bubble: {
            distance: 400,
            duration: 2,
            opacity: 0.6,
            size: 10,
          },
          push: {
            quantity: 4,
          },
          repulse: {
            distance: 200,
            duration: 0.4,
          },
        },
      },
      particles: {
        color: {
          value: "#ffffff",
        },
        links: {
          color: "#ffffff",
          distance: 150,
          enable: true,
          opacity: 0.5,
          width: 1,
        },
        collisions: {
          enable: true,
        },
        move: {
          direction: "none",
          enable: true,
          outModes: {
            default: "bounce",
          },
          random: false,
          speed: 2,
          straight: false,
        },
        number: {
          density: {
            enable: true,
            area: 800,
          },
          value: 80,
        },
        opacity: {
          value: 0.5,
        },
        shape: {
          type: "circle",
        },
        size: {
          value: { min: 1, max: 3 },
        },
      },
      detectRetina: true,
    }"
  />

4.使用tsparticles插件

tsparticlesimport { loadFull } from 'tsparticles'

const particlesInit = async (engine: any) => {
  await loadFull(engine)
}

const particlesLoaded = async (container: any) => {
  console.log('Particles container loaded', container)
}