VUE3中使用粒子特效

1.安装

使用npm安装

npm install particles.vue3 --save

使用yarn安装

yarn add particles.vue3 --save

2.在main.js中引入

import Particles from 'particles.vue3';

createApp(App).use(Particles).mount('#app');

3.在vue页面中使用

<template>
 <!--引入粒子特效-->
  <div class="bkpro-login-canvas">
    <Particles
      id="tsparticles"
      :options="options"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
    />
  </div>
</template>

<script lang="ts" setup>
// 粒子特效数据
const options = {
  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.5,
        size: 40
      },
      push: {
        quantity: 4
      },
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: '#dedede'
    },
    links: {
      color: '#dedede', // '#dedede'。线条颜色。
      distance: 140, // 线条长度
      enable: true, // 是否有线条
      opacity: 0.6, // 线条透明度。
      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: 100// 粒子数量。
    },
    opacity: {
      value: 0.7// 粒子透明度。
    },
    shape: {
      type: 'circle' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
    },
    size: {
      random: true,
      value: 5
    }
  },
  detectRetina: true
}

</script>