Implementierung eines dynamischen Partikel-Hintergrund-Plugins für die Vue-Anmeldeseite

Die dynamischen Partikeleffekte sind wie folgt:

Installieren Sie das Plugin

npm installiere vue-particles --save-dev

Global in die Datei main.js importieren

VueParticles aus „vue-particles“ importieren  
Vue.use(VueParticles)

Verwendung in Vue-Datei

 <vue-partikel
          Farbe #409EFF"
          :Partikelopacity="0,7"
          :Partikelanzahl="60"
          ShapeType = "Kreis"
          :Partikelgröße="6"
          LinienColor="#409EFF"
          :Zeilenbreite="1"
          :lineLinked="true"
          :Linienopacity="0,4"
          :LinienAbstand="150"
          :Bewegungsgeschwindigkeit="3"
          :hoverEffect="wahr"
          hoverMode="greifen"
          :KlickEffekt="true"
          Klickmodus="drücken">
</vue-partikel>

Verwenden Sie dynamische Partikel als Hintergrundbild. Wenn ein neues Div angezeigt werden muss, werden Sie feststellen, dass das Div den Inhalt der Vue-Partikel nicht abdecken kann und später der Reihe nach angezeigt wird. Daher wird position:absolute hinzugefügt und wenn eine neue Div-Box vorhanden ist, wird sie auf position:relative gesetzt

<Stil>
#Partikel-js {
  Breite: 100 %;
  Höhe: berechnet (100 % – 100 Pixel);
  Position: absolut;
}
</Stil>

Über die oben genannten Attribute:

Eigenschaften von Vue-Partikeln:
Farbe: Zeichenfolgentyp. Der Standardwert ist „#dedede“. Die Farbe der Partikel.
particleOpacity: Zahlentyp. Der Standardwert ist 0,7. Partikeltransparenz.
particlesNumber: Zahlentyp. Der Standardwert ist 80. Anzahl der Partikel.
shapeType: Zeichenfolgentyp. Der Standardwert ist „Kreis“. Verfügbare Partikelerscheinungstypen sind: „Kreis“, „Kante“, „Dreieck“, „Polygon“, „Stern“.
Partikelgröße: Zahlentyp. Der Standardwert ist 80. Individuelle Partikelgröße.
linesColor: Zeichenfolgentyp. Der Standardwert ist „#dedede“. Linienfarbe.
Zeilenbreite: Zahlentyp. Der Standardwert ist 1. Linienbreite.
lineLinked: Boolescher Typ. Der Standardwert ist „true“. Ist das Anschlusskabel vorhanden?
lineOpacity: Zahlentyp. Der Standardwert ist 0,4. Linientransparenz.
linesDistance: Zahlentyp. Der Standardwert ist 150. Linienabstand.
moveSpeed: Zahlentyp. Der Standardwert ist 3. Die Geschwindigkeit der Partikelbewegung.
hoverEffect: Boolescher Typ. Der Standardwert ist „true“. Ob Hover-Effekte vorhanden sind.
hoverMode: Zeichenfolgentyp. Der Standardwert ist „true“. Verfügbare Schwebemodi sind: „Greifen“, „Abstoßen“, „Blase“.
clickEffect: Boolescher Typ. Der Standardwert ist „true“. Ob ein Klickeffekt eintritt.
clickMode: Zeichenfolgentyp. Der Standardwert ist „true“. Verfügbare Klickmodi sind: „drücken“, „entfernen“, „abstoßen“, „blasen“

Dies ist das Ende dieses Artikels über die Implementierung des Plug-Ins für dynamische Partikelhintergründe für die Vue-Anmeldeseite. Weitere verwandte Inhalte zu Vue-dynamischen Partikelhintergründen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!