[JavaScript知识库]vue3 使用particles插件粒子背景

效果（可以修改多种不同的样式效果）

1、安装

npm install particles.vue3

2、main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import Particles from "particles.vue3"; // 引入

const app = createApp(App);

app.use(router).use(Particles).mount("#app");

3、页面使用

<template>
	<div class="box">
		<Particles id="tsparticles" class="login-partic" :options="options" />
	</div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
	setup(props) {
		const data = reactive({
			options: {
				fpsLimit: 50,
				interactivity: {
					events: {
						onClick: {
							enable: true,
							mode: 'push'
						},
						onHover: {
							enable: true,
							mode: 'grab'
						},
						resize: true
					},
					modes: {
						bubble: {
							distance: 400,
							duration: 2,
							opacity: 0.6,
							size: 10
						},
						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
					},
					collisions: {
						enable: true
					},
					move: {
						direction: 'none',
						enable: true,
						outMode: 'bounce',
						random: false,
						speed: 2,
						straight: false
					},
					number: {
						density: {
							enable: true,
							value_area: 800
						},
						value: 60
					},
					opacity: {
						value: 0.5
					},
					shape: {
						type: 'circle'
					},
					size: {
						random: true,
						value: 3
					}
				},
				detectRetina: true
			}
		})

		return {
			...toRefs(data),
		}
	}
}
</script>

?3.1、script setup下页面使用

<script setup>
import { reactive, toRefs } from "vue";

const data = reactive({
    options: {
        fpsLimit: 50,
        interactivity: {
            events: {
                onClick: {
                    enable: true,
                    mode: "push",
                },
                onHover: {
                    enable: true,
                    mode: "grab",
                },
                resize: true,
            },
            modes: {
                bubble: {
                    distance: 400,
                    duration: 2,
                    opacity: 0.6,
                    size: 10,
                },
                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,
            },
            collisions: {
                enable: true,
            },
            move: {
                direction: "none",
                enable: true,
                outMode: "bounce",
                random: false,
                speed: 2,
                straight: false,
            },
            number: {
                density: {
                    enable: true,
                    value_area: 800,
                },
                value: 60,
            },
            opacity: {
                value: 0.5,
            },
            shape: {
                type: "circle",
            },
            size: {
                random: true,
                value: 3,
            },
        },
        detectRetina: true,
    },
})

const { options } = toRefs(data) // 直接解构出来，页面上就不用data.options了
</script>

基本到这就结束了，这只是其中的一种样式，还有很多酷炫的样式可以展示

DEMO演示地址tsParticles | JavaScript Particles, Confetti and Fireworks animations for your websitetsParticles - Easily create highly customizable particles, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.https://particles.js.org/

github：https://github.com/matteobruni/tsparticles/tree/main/components/vue3https://github.com/matteobruni/tsparticles/tree/main/components/vue3