Implementation of dynamic particle background plugin for Vue login page

The dynamic particle effects are as follows:

Install the plugin

npm install vue-particles --save-dev

Import globally in main.js file

import VueParticles from 'vue-particles'  
Vue.use(VueParticles)

Use in vue file

 <vue-particles
          color="#409EFF"
          :particleOpacity="0.7"
          :particlesNumber="60"
          shapeType="circle"
          :particleSize="6"
          linesColor="#409EFF"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push">
</vue-particles>

Use dynamic particles as the background image. When a new div needs to be presented, you will find that the div cannot cover the vue-particles content and will be displayed later in turn. Therefore, position:absolute is added, and when there is a new div box, it is set to position:relative

<style>
#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
</style>

About the above attributes:

Properties of vue-particles:
color: String type. Default is '#dedede'. The color of the particles.
particleOpacity: Number type. Default is 0.7. Particle transparency.
particlesNumber: Number type. The default value is 80. Number of particles.
shapeType: String type. Default is 'circle'. Available particle appearance types are: "circle", "edge", "triangle", "polygon", "star".
particleSize: Number type. The default value is 80. Individual particle size.
linesColor: String type. Default is '#dedede'. Line color.
linesWidth: Number type. Default is 1. Line width.
lineLinked: Boolean type. Default is true. Is the connection cable available?
lineOpacity: Number type. Default is 0.4. Line transparency.
linesDistance: Number type. The default is 150. Line distance.
moveSpeed: Number type. Default is 3. The speed of particle movement.
hoverEffect: Boolean type. Default is true. Whether there are hover effects.
hoverMode: String type. Default is true. Available hover modes are: "grab", "repulse", "bubble".
clickEffect: Boolean type. Default is true. Whether there is a click effect.
clickMode: String type. Default is true. Available click modes are: "push", "remove", "repulse", "bubble"

This is the end of this article about the implementation of the dynamic particle background plug-in for the Vue login page. For more related Vue dynamic particle background content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!