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)//使用粒子特效

页面使用

配置

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
      }
}