vue3+TS或JS, 实现粒子特效 @tsparticles/vue3

在跟着B站视频BV11s4y1a71T学习时,使用到了粒子效果

VUE3+TS+@tsparticles/vue3

以下这种情况只适用于项目是基于typescript的写法,否则无法实现

1、安装

pnpm i @tsparticles/vue3 @tsparticles/slim

2、main.ts 引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'


import Particles from "@tsparticles/vue3";
import { loadSlim } from "@tsparticles/slim";

const app = createApp(App)
 
app.use(Particles as any, {
  init: async (engine: any) => {
    await loadSlim(engine);
  },
});

app.mount('#app')

3、App.vue

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import {ref} from 'vue'
const particlesOptions = ref({
  background: {
    color: {
      value: "block",
    },
  },
  fullScreen: {
    enable: false,
  },
  opacity: {
    value: 1,
    random: true,
  },
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: "push",
      },
      onHover: {
        enable: true,
        mode: "repulse",
      },
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40,
      },
      push: {
        quantity: 4,
      },
      repulse: {
        distance: 200,
        duration: 0.4,
      },
    },
  },
  particles: {
    color: {
      value: "random",
      animation: {
        enable: true,
        speed: 20,
        sync: true,
      },
    },
    links: {
      color: "random",
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1,
    },
    move: {
      direction: "none",
      enable: true,
      outModes: "bounce",
      random: false,
      speed: 6,
      straight: false,
    },
    number: {
      density: {
        enable: true,
      },
      value: 80,
    },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: "circle",
    },
    size: {
      value: { min: 1, max: 5 },
    },
  },
  detectRetina: true,
});
</script>

<template>
  
 <vue-particles id="tsparticles" :options="particlesOptions" />
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
#tsparticles{
    position: absolute; 
    width: 100%; 
    height: 100%;
  }
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

4、效果

在这里插入图片描述

VUE3+JS+非最新版

当vue3项目没有配套使用TS的时候,上述粒子效果就无法实现。采用下面的方法。
参考文章《Vue3粒子库只有背景没有粒子效果》

1、安装低版本的vue3-particles

pnpm install vue3-particles@^1.43.1

2、main.js 注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入element plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import Particles from "vue3-particles";

const app = createApp(App)

app.use(store)
app.use(router)
app.use(ElementPlus)
app.use(Particles)

app.mount('#app')

3、页面使用

<template>
  <div>   
    <Particles id="tsparticles" :options="options" />
  </div>
</template>

<script>
export default { name:'' }
</script>

<script setup>
 //import {ref, reactive} from 'vue'
//  const handleLogin = ()=>{
//   localStorage.setItem('token','purpleberry')
//  }

const handleLogin = () => {
    localStorage.setItem("token", "JJ")
};
//配置particles
const options = {
    background: {
        color: {
            value: '#0d47a1',
        },
    },
    fpsLimit: 120,
    interactivity: {
        events: {
            onClick: {
                enable: true,
                mode: 'push',
            },
            onHover: {
                enable: true,
                mode: 'repulse',
            },
            resize: true,
        },
        modes: {
            bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
            },
            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,
        },
        move: {
            direction: 'none',
            enable: true,
            outMode: 'bounce',
            random: false,
            speed: 6,
            straight: false,
        },
        number: {
            density: {
                enable: true,
                area: 800,
            },
            value: 80,
        },
        opacity: {
            value: 0.5,
        },
        shape: {
            type: 'circle',
        },
        size: {
            random: true,
            value: 5,
        },
    },
    detectRetina: true,
}

</script>

<style scoped lang="scss">

</style>

4、效果

在这里插入图片描述

### 集成 Particles.jsVue 3Vue 3 中集成 Particles.js 可以通过安装 `@tsparticles/vue` 和其他必要的依赖来完成。以下是具体方法: #### 安装依赖包 首先,在项目根目录执行命令安装所需的库: ```bash npm install @tsparticles/vue tsparticles-engine ``` 者使用 yarn 进行安装: ```bash yarn add @tsparticles/vue tsparticles-engine ``` #### 修改入口文件 main.ts/main.js 编辑项目的入口文件(main.ts 者 main.js),导入并配置 Particles 组件。 对于 TypeScript 用户来说,还需要定义引擎类型以及初始化函数[^4]: ```typescript // 导入Particles组件及相关模块 import Particles from "@tsparticles/vue"; import type { Engine } from &#39;tsparticles-engine&#39;; import { loadFull } from "tsparticles"; const app = createApp(App); app.use(Particles, { init: async (engine: Engine) => { await loadFull(engine); } }); app.mount(&#39;#app&#39;); ``` #### 使用 Particles 组件 可以在任何单文件组件(SFCs)内部直接使用 `<particles>` 标签来创建粒子效果区域: ```html <template> <div class="container"> <!-- 粒子动画容器 --> <particles></particles> <!-- 页面其余部分... --> </div> </template> <script setup lang="ts"> // 此处无需额外逻辑处理 </script> <style scoped> .container { position: relative; } /* 设置粒子画布样式 */ particles { width: 100%; height: 100vh; } </style> ``` #### 自定义粒子行为 如果想要自定义粒子的行为模式,则可以通过 JSON 文件指定参数设置,并将其路径传递给 Particles 组件的 props 属性。例如,在 src/assets/particles.json 创建配置文件后,修改模板代码如下所示: ```html <!-- 将json配置传入props中 --> <particles :options="{ url: &#39;/path/to/your/particles.json&#39; }"></particles> ``` 这样就可以轻松地为 Vue 3 应用程序添加精美的粒子背景特效了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值