vue3 vue3-particles粒子使用方法

余温无痕

已于 2024-04-30 11:15:01 修改

阅读量5.6k

点赞数 3

分类专栏： particles vue3 文章标签： vue3-particles vue3 粒子效果 particles

于 2023-10-30 10:11:48 首次发布

本文链接：https://blog.csdn.net/u014678583/article/details/134113114

版权

vue3 同时被 2 个专栏收录

20 篇文章 6 订阅

订阅专栏

particles

2 篇文章 0 订阅

订阅专栏

如果有遇到报错：TypeError: interactor.init is not a function

请把tsparticles版本降到2.12.0

npm i tsparticles@2.12.0

注意：这个vue3-particles和particles.vue3有些许差别的（安装、引入方式）

particles.vue3示例：vue3 使用particles插件粒子_vueparticles_余温无痕的博客-CSDN博客

下面是vue3-particles使用介绍

先看效果，背景图是自己设置的

安装：

// 这两个都要安装

npm i vue3-particles

npm i tsparticles@2.12.0  // 不要3版本以上，会报错TypeError: interactor.init is not a function

在main.js中引用

import Particles from "vue3-particles"

const app = createApp(App);
app.use(Particles).mount("#app")

页面上，更新了放置背景图片的css

<template>
    <div class="login-bg">
        <vue-particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="data.options" />
    </div>
</template>

<script setup>
import { loadFull } from "tsparticles"
    
const data = reactive({
    options: {
        fpsLimit: 100,
        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 particlesInit = async (engine) => {
   await loadFull(engine)
}
const particlesLoaded = async (container) => {
   // console.log("Particles container loaded", container)
}
</script>
<style lang="less" scoped>
/**放置背景图片 */
.login-bg {
    width: 100%;
    height: 100%;
    background: url("xxx") no-repeat
        center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
</style>

APP.vue——跟设置背景图片有关

<div class="view-box"></div>

<style lang="less">
.app-box {
    width: 100%;
    height: 100%;
}
</style>

公共css ——跟设置背景图片有关

html,
body {
    height: 100%; 
}

#app {
    height: 100%;
}