前言： 实际项目中需要，效果完成记录一下
版本说明：JavaScript + vue："^3.5.22" "vite": "^7.1.7" node: "v24.11.0" npm: "11.6.1"
一、安装与引入
1.安装依赖
通过 npm 安装插件：
npm install vue3-particles tsparticles tsparticles-slim
安装版本
"particles.vue3": "^2.12.0",
"tsparticles": "^3.9.1",
"tsparticles-slim": "^2.12.0",
2.全局注册（需补充引擎初始化）
//main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
//使用particles粒子效果插件
import Particles from 'particles.vue3'
import { loadSlim } from "tsparticles-slim";
const app = createApp(App);
// 正确初始化方式
// app.use(Particles);
app.use(Particles, {
init: async (engine) => {
// await loadFull(engine) // 加载完整引擎
await loadSlim(engine);
}
})
app.mount('#app');
二、我在实际案例中的使用
我做的是一个全局页面的背景，实现粒子颜色和背景
login.png
代码实现
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
<!--粒子背景-->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="options"
/>
</div>
</template>
<script>
import { loadSlim } from "tsparticles-slim";
import { defineComponent, onMounted, reactive, toRefs, ref, provide, nextTick } from 'vue';
export default defineComponent({
components: {},
setup() {
const state = reactive({
isRouterAlive: true, // 控制路由器视图的显示与隐藏
// 粒子库 options 配置
options: {
background: {
color: {
value: 'linear-gradient(90deg, rgba(26, 26, 46, 1) 0%, rgba(70, 38, 95, 1) 100%)'
}
},
motion: {
disable: false,
reduce: true // 低性能设备自动降低动画复杂度
},
detectRetina: true,
fpsLimit: 60, // 帧率上限
pauseOnBlur: true, // 窗口失焦时暂停动画
pauseOnOutsideViewport: true, // 元素不可见时暂停
interactivity: {
// detect_on: "canvas",
events: {
//点击是否有效果
onClick: {
enable: false,
mode: 'push'
},
//鼠标浮动是否有效果
onHover: {
enable: false,
mode: 'repulse'
},
resize: false
},
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,
consent: true // 禁用链接 consent 检查
},
move: {
direction: 'none',
enable: true,
outModes: {
default: 'out'
},
random: false,
speed: 0.3,
straight: false
},
number: {
value: 40 //个数
},
//透明度设置
opacity: {
random: false,
value: 0.3
},
shape: { //外观形状 “circle”,“edge”,“triangle”, “polygon”,“star” "image" 或者["circle", "triangle", "image"]
type: "circle",
},
size: {
value: 5
}
},
}
});
// 这是提供给后代组件的刷新函数
const reload = async () => {
state.isRouterAlive = false
// 使用 nextTick 确保在下一个 DOM 更新周期后重新挂载组件
await nextTick()
state.isRouterAlive = true
}
// 提供一个名为 'reload' 的函数，后代组件可以注入它
provide('reload', reload)
const particlesInit = async engine => {
await loadSlim(engine);
};
const particlesLoaded = async container => {
console.log("Particles container loaded", container);
}
return {
...toRefs(state),
particlesInit,
particlesLoaded
};
},
});
</script>
<style scoped lang="scss">
#app {
position: relative;
}
</style>
js属性介绍
//使用particles.vue3粒子效果插件 版本号：^2.12.0
const options = {
options: {
//背景底色
background: {
color: {
value: 'linear-gradient(90deg, rgba(26, 26, 46, 1) 0%, rgba(70, 38, 95, 1) 100%)'
}
},
motion: {
disable: false,
reduce: true // 低性能设备自动降低动画复杂度
},
detectRetina: true,
fpsLimit: 60, // 帧率上限
pauseOnBlur: true, // 窗口失焦时暂停动画
pauseOnOutsideViewport: true, // 元素不可见时暂停
interactivity: { //交互性
events: {
//点击是否有效果
onClick: {
enable: true,
mode: 'push' //click模式: "push", "remove", "repulse", "bubble"
},
//鼠标浮动是否有效果
onHover: {
enable: false,
mode: 'repulse', //hover模式: “grab”(磁吸), “repulse”(排斥), “bubble”(气泡)
},
detect_on: "canvas", //原子之间互动检测 "canvas", "window"
resize: false //互动事件调整
},
modes: {
// 气泡
bubble: {
distance: 400,
duration: 2, //持续时间
opacity: 0.8,
size: 40
},
// 推
push: {
quantity: 4 //数量
},
// 排斥
repulse: {
distance: 200,
duration: 0.4
}
}
},
// 粒子
particles: {
//形状颜色设置
color: {
value: ["#FFFFFF","#9116FC", "#F830E4", "#EBFF00", "#FFFFFF"]
},
//粒子线条设置
links: {
color: '#ffffff', //线条颜色
distance: 150, //线条距离 默认150
enable: false, //连接线是否可用
opacity: 0.5, //线条透明度
width: 1, //线条宽度
consent: false // 禁用链接 consent 检查
},
// 碰撞
collisions: {
enable: true,
mode: "bounce", // 较"absorb"模式更轻量
frequency: 0.05 // 降低检测频率
},
// 移动
move: {
enable: true, //原子移动
direction: 'none', //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom"
speed: 3, // 粒子运动速度
outModes: { // 输出模式
default: 'bounce' //bounce-弹跳 out
},
random: false, //是否随机
straight: false, //是否直线
out_mode: "out", //是否移动出画布
bounce: false, //是否跳动移动
attract: {
enable: false, // 原子之间吸引
rotateX: 600, //原子之间吸引X水平距离
rotateY: 600 //原子之间吸引Y水平距离
},
},
//粒子数量
number: {
// 密度 用value值除以区域值
density: {
enable: true, //启用粒子的稀密程度
area: 800, //区域散布密度大小
},
limit: 200, //最大粒子限制
value: 30 //个数
},
//粒子透明度
opacity: {
value: 0.5, //不透明度
random: true, //随机不透明度
anim: {
enable: true, //渐变动画
speed: 1, // 渐变动画速度
opacity_min: 0, //渐变动画不透明度
sync: true
}
},
//粒子外观
shape: {
//粒子外观类型 “circle”(圆形),“edge”(边缘形线条),“triangle”(三角形), “polygon”(多边形),“star”(星形), "image" 或者 ["circle", "triangle", "image"]
type: 'polygon',
stroke: {
width: 2, //粒子的宽度
color: '#ffffff', //粒子的颜色
},
polygon: { //多边形
nb_sides: 6 //自定义边数
},
//图片 type: "image",
image: {
src: 'https://image.baidu.com/search/detail?adpicid=0&b_applid=11712342720810777388&bdtype=0&commodity=©right=&cs=1642463904%2C1695067860&di=7562963243866521601&fr=click-pic&fromurl=http%253A%252F%252Fxiazai.51miz.com%252Fso-png%252F2757238.html&gsm=5a&hd=&height=0&hot=&ic=&ie=utf-8&imgformat=&imgratio=&imgspn=0&is=0%2C0&isImgSet=&latest=&lid=&lm=&objurl=https%253A%252F%252Fimg-qn.51miz.com%252FElement%252F00%252F75%252F25%252F23%252F26065a5c_E752523_28fcfa64.png&os=1889717905%2C3815756761&pd=image_content&pi=0&pn=72&rn=1&simid=1642463904%2C1695067860&tn=baiduimagedetail&width=0&word=%E6%98%9F%E6%98%9F&z=',
width: 100,
height: 100
},
//type: "svg",
svg: {
path: "M10,10 C10,30 30,30 30,10 Z",
fill: "#ff0000"
},
// type: "emoji", // 性能优于text形状
emoji: {
value: "✨",
font: "Arial"
}
},
//单个粒子大小 默认80
size: {
value: { min: 1, max: 5 },
"random": true, // 原子大小随机
"anim": {
enable: false, // 原子渐变
speed: 4, //原子渐变速度
size_min: 0.3,
sync: false
}
}
},
}
}
结语
通过合理配置 Vue-Particles，开发者能快速实现高端动态背景效果。建议收藏参数表，开发时随查随用。
