【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>
原文地址:https://blog.csdn.net/sjp991012/article/details/137816927
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!