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"><Particlesid="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}
}