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>

基本到这就结束了，这只是其中的一种样式，还有很多酷炫的样式可以展示

DEMO演示地址tsParticles | JavaScript Particles, Confetti and Fireworks animations for your websitetsParticles - Easily create highly customizable particles, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.https://particles.js.org/

github：https://github.com/matteobruni/tsparticles/tree/main/components/vue3https://github.com/matteobruni/tsparticles/tree/main/components/vue3

vue3 使用particles插件粒子背景相关推荐

使用vue3+element-plus+particles实现炫酷(粒子背景)登陆界面
效果图如下: 撸代码前准备(从无到有): 1.导入element-plus: # yarn yarn add element-plus # npm npm install element-plus - ...
超酷炫粒子背景插件—particles.js
GitHub-教程-下载 1)先到github中下载particles.js-master.zip,下载下来的文件中有一个demo案例. 2)将demo文件中的particles.min.js.sty ...
vue框架嵌入vue-particles（粒子背景）插件
vue-particles 是什么? 它是一个粒子背景插件.地址:https://github.com/creotip/vue-particles 使用方法安装 npm install vue-pa ...
vue-particles（粒子背景）插件在Vue项目中使用
前言: 因为领导让我给整个项目加一个粒子背景,所以才有了这篇文章,那我就说一下我项目中是如何使用的吧,我也搜索了有关资料,基本上都是用在首页的,但是我这个他让我用在整个项目中.一开始我也是先用的par ...
2021-11-10 动态粒子背景插件
动态粒子背景插件安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from 'vue-par ...
Vue中使用vue-particles（粒子背景）插件美化登录页面
使用方法: 1.安装插件 npm install vue-particles --save-dev yarn add vue-particles 2.在main.js文件中全局引入 import Vu ...
vue 动态粒子背景插件
动态粒子背景效果如下: vue-particles 是粒子背景插件如何使用? 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入: i ...
Vue项目中使用vue-particles（粒子背景）插件
vue-particles 是什么? 它是一个粒子背景插件. github地址:https://github.com/creotip/vue-particles 使用方法: 1.安装插件 npm in ...
particles.js粒子特效（常用登录页背景）
1.效果图 2.js下载 particles.js开源地址:GitHub - VincentGarreau/particles.js: A lightweight JavaScript library ...

vue3 使用particles插件粒子背景

vue3 使用particles插件粒子背景相关推荐

最新文章

热门文章