温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3中怎么使用particles插件实现粒子背景

发布时间:2022-03-31 17:06:08 来源:亿速云 阅读:1461 作者:iii 栏目:开发技术

这篇文章主要介绍了vue3中怎么使用particles插件实现粒子背景的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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 = 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>

关于“vue3中怎么使用particles插件实现粒子背景”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue3中怎么使用particles插件实现粒子背景”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI