How to use particles plug-in to realize Particle background in vue3
This article mainly introduces the vue3 how to use the particles plug-in to achieve particle background related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that you read this vue3 how to use the particles plug-in to achieve particle background article will have a harvest, let's take a look at it.
Effects (you can modify many different style effects)
1. Installation
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"; / / introduce const app = createApp (App); app.use (router) .use (Particles) .mount ("# app")
3. Page usage
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),}
3.1Use the page under 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) / / directly deconstructed There is no need for data.options on the page. This is the end of the article on "how to use the particles plug-in to achieve particle background in vue3". Thank you for reading! I believe that everyone has a certain understanding of "how to use particles plug-ins to achieve particle background in vue3". If you want to learn more, you are welcome to follow the industry information channel.
