VUE3中使用Particles 粒子特效

一、安装

vue3中要使用 particles.vue3

//使用npm安装
npm install particles.vue3 --save

//使用yarn安装
yarn add particles.vue3 --save

//使用TS还需安装，如果安装完还是报错找不到该模块，可以重启一下项目
npm i tsparticles

二、VUE3+TS 项目中使用

1、src目录下创建文件名为 env.d.ts，声明文件

declare module 'particles.vue3';

2、main.ts 中导入

import Particles from 'particles.vue3'
createApp(App)
  .use(Particles)
  .mount('#app')

3、页面中使用

<template>
    <div>
      <Particles
        id="tsparticles"
        :particlesInit="particlesInit"
        :particlesLoaded="particlesLoaded"
        :options="options"
      />
    </div>
</template>
<script setup lang='ts'>
import { reactive } from 'vue'
import { loadFull } from "tsparticles"
import type { Engine } from 'tsparticles-engine'

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

const particlesLoaded = async (container:any) => {
    console.log('Particles container loaded', container)
}
const options = reactive({
      background: {
        color: {
          value: '#000' // 粒子颜色
        }
      },
      fpsLimit: 60,
      interactivity: {
        events: {
          onClick: {
            enable: true,
            mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。
          },
          onHover: {
            enable: true,
            mode: 'grab' // 可用的hover模式有: "grab", "repulse", "bubble"。
          },
          resize: true
        },
        modes: {
          bubble: {
            distance: 400,
            duration: 2,
            opacity: 0.8,
            size: 40
          },
          push: {
            quantity: 4
          },
          repulse: {
            distance: 200,
            duration: 0.4
          }
        }
      },
      particles: {
        color: {
          value: '#ffffff'
        },
        links: {
          color: '#ffffff', // '#dedede'。线条颜色。
          distance: 150, // 线条长度
          enable: true, // 是否有线条
          opacity: 0.5, // 线条透明度。
          width: 1 // 线条宽度。
        },
        collisions: {
          enable: false
        },
        move: {
          direction: 'none',
          enable: true,
          outMode: 'bounce',
          random: false,
          speed: 4, // 粒子运动速度。
          straight: false
        },
        number: {
          density: {
            enable: true,
            area: 800
          },
          value: 80 // 粒子数量。
        },
        opacity: {
          value: 0.5 // 粒子透明度。
        },
        shape: {
          type: 'circle' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
        },
        size: {
          random: true,
          value: 5
        }
      },
      detectRetina: true
    })

</script>

效果如下图：