1.安装
//使用npm安装
npm install particles.vue3 --save
//使用yarn安装
yarn add particles.vue3 --save
//使用TS还需安装,如果安装完还是报错找不到该模块,可以重启一下项目
npm i tsparticles
2.全局引入
// main.ts
import { createApp } from 'vue'
//引入粒子插件
import Particles from 'particles.vue3'
import App from './App.vue'
const app = createApp(App)
//注册粒子插件
app.use(Particles)
app.mount('#app')
3.使用
<template>
<div class="bg">
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="options"
/>
</div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { loadFull } from "tsparticles";
import type { Engine } from "tsparticles-engine";
const particlesInit = async (engine: Engine) => {
await loadFull(engine);
};
const particlesLoaded = async (container: any) => {
console.log("Particles container loaded", container);
};
const options = reactive({
background: {
color: {
value: "#F0F8FF", // 粒子颜色
},
},
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: "#40E0D0", // '#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,
});
</script>
<style>
</style>
4.注意
注意z-index使用时给自己的代码添加z-index要不显现不出来