vue3使用particles插件实现粒子背景的方法详解

目录
  • 总结

效果(可以修改多种不同的样式效果)

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 = http://www.cppcns.com/wangluo/javascript/reactive({
			options: {
				fpsLimit: 50,
				interactivity: {
			www.cppcns.com		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
						}
					}
				},
			djmCKTms	particles: {
					color: {
						value: '#ffffff'
http://www.cppcns.com					},
					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 = http://www.cppcns.com/wangluo/javascript/reactive({
    options: {
        fpsLimit: 50,
        interactivity: {
            events: {>http://www.cppcns.comnone",
                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>

总结

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

vue3使用particles插件实现粒子背景的方法详解

扫一扫手机访问