vue3中使用粒子庫particles.vue3
阿新 • • 發佈:2022-03-18
安裝配置
npm install particles.vue3
全域性引入main.js
import Particles from 'particles.vue3'
app.use()
.use(Particles)
.mount('#app')
頁面中使用
<div class="login" > <!--引入粒子特效--> <Particles id="tsparticles" :options="options" /> </div>
非ts寫法
// <!--引入粒子特效的相關配置--> const options = { background: { color: { value: "#dedede",//粒子顏色 }, }, 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: 4,//粒子運動速度。 straight: false, }, number: { density: { enable: true, area: 800, }, value: 80,//粒子數量。 }, opacity: { value: 0.5,//粒子透明度。 }, shape: { type: "circle", //可用的粒子外觀型別有:"circle","edge","triangle", "polygon","star" }, size: { random: true, value: 5, }, }, detectRetina: true, };