欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2022-11-02 11:00:36|栏目:vue|点击:

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

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 组件的开发详情

栏    目:vue

下一篇:详解前后端分离之VueJS前端

本文标题:vue3使用particles插件实现粒子背景的方法详解

本文地址:http://www.codeinn.net/misctech/217971.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有