【vue3】插件@tsparticles/vue3、tsparticles实现粒子特效

本文主要是介绍【vue3】插件@tsparticles/vue3、tsparticles实现粒子特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

一、安装依赖
二、全局引入
三、使用

在这里插入图片描述

一、安装依赖

npm i @tsparticles/vue3
npm i tsparticles

二、全局引入

// main.js
import Particles from '@tsparticles/vue3'
import { loadFull } from 'tsparticles'const app = createApp(App)
app.use(Particles, {init: async (engine) => {await loadFull(engine) // you can load the full tsParticles library from "tsparticles" if you need it// loadSlim 轻量级的// await loadSlim(engine) // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations}
})

三、使用

<template><div><vue-particles id="tsparticles" :options="particlesOption" /></div>
</template><script setup lang="ts">
const particlesOption = {background: {color: {value: '#0d47a1'}},fpsLimit: 120,interactivity: {events: {onClick: {enable: true,mode: 'push'},onHover: {enable: true,mode: 'repulse'},},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',distance: 150,enable: true,opacity: 0.5,width: 1},move: {direction: 'none',enable: true,outModes: 'bounce',random: false,speed: 6,straight: false},number: {density: {enable: true,},value: 80},opacity: {value: 0.5},shape: {type: 'circle'},size: {value: { min: 1, max: 5 }}},detectRetina: true
}
</script>