Vue particle effects example sharing

This article mainly introduces to you the sample code of vue particle effects. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Achievement effect:

Yes, the points and lines you see in the picture above that are similar to the constellation diagram are made by vue- Particles are generated and can interact with user mouse events.

Portal: vue-particles

Usage tutorial

##

npm install vue-particles --save-dev

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

##

<template> 
  <p id="app">
   <vue-particles color="#dedede"></vue-particles>
  </p>
 </template>

<template> 
  <p id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </p>
 </template>

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

The above is the detailed content of Vue particle effects example sharing. For more information, please follow other related articles on the PHP Chinese website!