Detaillierte Erklärung der Implementierung eines coolen Menü-Plug-Ins in Vue

Dieser Artikel führt Sie hauptsächlich in die Implementierung eines coolen Menü-Plug-Ins auf Basis von Vue ein. Für dieses Tutorial sind bestimmte Grundkenntnisse in CSS und Vue erforderlich Ich hoffe, ich kann allen helfen.

Vorne geschrieben

Ich habe kürzlich ein sehr cooles Menü-Plug-in gesehen und wollte es schon immer in Vue-Form basteln. Wer hat mir gesagt, dass ich ein Würfel bin? -harter Vue-Fan? Wenn das nicht einmal Liebe ist :nachdenklich:. :lachend: Lasst uns ein bisschen Spaß haben und gemeinsam schwarze Magie erforschen. Leser, die sich dieses Tutorial ansehen, müssen über bestimmte Kenntnisse von Vue und CSS3 verfügen.

Struktur dieses Artikels

1. Einführung in die Verwendung

3. Erläuterung der wichtigsten Schritte

Text

1. Wirkungsdemonstration

Bild_1

pic2

pic_3

Online-Demo Live-Demo

2. Einführung in die Nutzung

Projekt Adresse: github .com/MingSeng-W/vue-bloom-menu, klonen Sie das Projekt lokal

a. Führen Sie zunächst die Menükomponente in die einzelne Dateikomponente ein und importieren Sie menuConfig.stylus.

b. Konfigurieren Sie die entsprechenden Parameter

Optionale Parameter

* Radius: Standard ist 100px, der Abstand zwischen dem Element und der Menüschaltfläche.

* startAngle: Standardmäßig ist 0, der Winkel, bei dem das Element beginnt, wird als 0 mit der 3-Uhr-Richtung der Uhr aufgezeichnet, und dann ist die Richtung im Uhrzeigersinn die zunehmende Richtung.

* endAngle: Standard ist 315, der Winkel des letzten Elements.

* itemNum: Standard ist 8

* animationDuration: Standard ist 0,5 s, die Ausführungszeit jeder Elementanimation

* itemAnimationDelay: Standard ist 0,04 s, jedes Element Intervall Verzögerungszeit zwischen Animationsauslösern

Erforderliche Parameter

* iconImgArr

Importieren Sie das benötigte Symbol, generieren Sie dann iconImgArr (berechnete Attributbindung) und übergeben Sie es als Requisiten. Geben Sie die Menükomponente an

die Position des Menüs

Derzeit gibt es zwei Positionen: Mitte und Ecke, die in der Menüklasse angegeben werden. Klasse der Mitte: .menu-center-wrapper

Klasse der Ecke: .menu-left-corner-wrapper. Natürlich ist es in Ordnung, den Standort selbst anzugeben.

Ein einfaches Beispiel

Demo

3. Erläuterung der wichtigsten Schritte

Der Schlüssel zur Umsetzung des Das gesamte Menü liegt in der Berechnung der endgültigen Koordinaten nach der Erweiterung des Menüs sowie der Animation der Erweiterung und Kontraktion (Da das gesamte Projektlayout relativ einfach ist, erklären wir hier hauptsächlich die Implementierung von Logik und Animation)

Schritt 1: Berechnen Sie die horizontalen und vertikalen Koordinaten, nachdem das Menü erweitert wurde. Die x- und y-Koordinaten unter den Koordinaten

stellen jeweils die Position des Elements auf der Seite dar, wobei x als Beispiel dient.

x: die ursprüngliche Position, die letzte erweiterte Position von x2 und die Übergangsposition in der Mitte von x1 (was hauptsächlich einen „Rückzugseffekt“ verursacht). Zur Erläuterung folgt das Folgende Es ist einfach und klar, ich habe den Radius vergrößert, multipliziert und die Ausführungszeit der Animation erhöht.

Positionserklärung

Berechnung der Position: Berechnen Sie zunächst den Winkel zwischen den einzelnen Elementen. Der Winkel zwischen den Elementen ist gleich (endAngle-startAngle)/(itemNum-1). Der Winkel, um den das aktuelle Element gedreht werden soll, ist: angleCur=startAngle+index*der Winkel zwischen den einzelnen Elementen. Nachdem Sie den Drehwinkel des Elements ermittelt haben, multiplizieren Sie Math.cos, Math.sin und den Radius, um seine Abszisse und Ordinate zu erhalten

Tastencode:

Berechnen Sie den Winkel jedes Elements

Positionserklärung

Der zweite Schritt besteht darin, mit js dynamisch Animationen basierend auf den generierten Koordinaten zu generieren und in die einzufügen Stildatei Mitte.

Erweiterte und verkleinerte Keyframes generieren

In diesem Schritt haben wir das Klicken auf das Menü zum Erweitern und Verkleinern abgeschlossen.

Der zweite Schritt besteht darin, die Vergrößerung und das Verschwinden des Elements nach dem Klicken auf das Element sowie die Verkleinerung und das Verschwinden anderer Elemente abzuschließen

Der Keyframe des Verschwindens des Elements

Der Keyframe, in dem das Element verschwindet

wird verwendet, um die Animation mithilfe von Vue auszulösen, um den Übergang bereitzustellen, wenn die V-Show des Elements falsch ist Die Anzeige erfolgt nicht, die Animation wird ausgelöst.

Nachdem die Animation jedes Elements abgeschlossen ist, wird das Ereignis „animationEnd“ ausgelöst und das Ereignis „animationEnd“ des Elements wird überwacht. Wenn alle Animationen nacheinander ausgelöst werden, wird das Menü daran erinnert, geschlossen zu werden (übergeordnet). Kommunikation untergeordneter Komponenten).

Ich verwende v-on in der Menükomponente, um das AnimationEnd-Ereignis abzuhören. Nachdem die eigene Animation des Elements ausgeführt wurde, wird das AnimationEnd-Ereignis über $emit ausgelöst, um die Anzahl der Animationen des Menüs zu benachrichtigen die Gesamtzahl der Elemente, Menü zum Schließen.

Code

Code

Überprüfen Sie beim erneuten Öffnen des Menüs, ob das an das Element gebundene showItem falsch ist. Wenn ja, setze es auf true. Beim Klicken müssen Sie den Index des angeklickten Elements und den globalen aktuellen Index abrufen, der der Index des angeklickten Elements ist. Der Angeklickte verwendet die Zoom-In-Animation, andernfalls wird die Zoom-Out-Animation verwendet.

pic_6

Verwandte Empfehlungen:

html: Menü-Tag Detaillierte Erläuterung der Definition einer Menüliste

10 empfohlene Artikel über Menü

Detaillierte Erläuterung von Beispielen Bootstrap verwendet Dropdown-Menü, um Kontextmenü zu implementieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Implementierung eines coolen Menü-Plug-Ins in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!