vue3使用粒子特效

安装

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

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

//必须得装
npm i tsparticles

使用

main.js

import Particles from 'particles.vue3'
const app = createApp(App)
app.use(Particles)//使用粒子特效

页面使用

<script setup>
import config from "@/views/login/config.js"
import { ref, reactive, toRefs, onMounted } from "vue";

import { loadFull } from "tsparticles"
console.log(config,'particles');
const options = reactive(config.particles);
const particlesInit = async (engine) => {
    await loadFull(engine)
}

const particlesLoaded = async (container) => {
    console.log('粒子效果加载完成时触发', container)
}
</script>
<template>
  <div class="container-page">
      <Particles
        id="tsparticles"
        :particlesInit="particlesInit"
        :particlesLoaded="particlesLoaded"
        :options="options"
      />
  </div>
</template>
<style scoped >
.container-page {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: relative;
}
</style>

配置

export default {
    particles:{
        background: {
          color: {
            // value: '#2d3a4b' // 粒子颜色，如果有图片背景记得注释掉不然会覆盖背景
          }
        },
        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: 1, // 粒子运动速度。
            straight: false
          },
          number: {
            density: {
              enable: true,
              area: 800
            },
            value: 80 // 粒子数量。
          },
          opacity: {
            value: 0.5 // 粒子透明度。
          },
          shape: {
            type: 'star' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
          },
          size: {
            random: true,
            value: 5
          }
        },
        detectRetina: true
      }
}