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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!