Globale Aufrufimplementierung von Vue2.x Picker auf mobilen Endgeräten

Was ist die Picker-Komponente

Im Vergleich zum Select-Tag auf der PC-Seite wird das Auswahlfeld auf der mobilen Seite normalerweise am unteren Rand des Ansichtsfensters angezeigt.

Probleme mit Picker-Komponenten

• Picker verwendet normalerweise ein festes Layout. Beim Schreiben von Picker-Komponenten stellen wir jedoch fest, dass die Komponente nicht am unteren Rand des Ansichtsfensters angezeigt werden kann, sondern innerhalb der Komponente angezeigt wird, was zu Stilverwirrung führt und nicht der Ästhetik des C-Endes entspricht. Der Grund für das obige Problem liegt im [Stapelkontext]. Das feste Layout basiert nicht auf dem Ansichtsfenster als Basis, sondern auf dem aktuellen Stapelkontext.
• Wenn der Picker unter der Stammkomponente platziert wird, wird der Datenfluss durcheinander gebracht. Zu tief verschachtelte Komponenten können das Anzeigen und Ausblenden des Pickers nicht einfach auslösen. Dies muss in Kombination mit der Statusverwaltung vuex oder durch transparente Übertragung von $listeners verarbeitet werden, was die geistige Belastung der Entwickler in gewissem Maße erhöht.

Lösung

Die Verwendung deklarativer Programmierung zum Platzieren des Pickers im Body kann die beiden oben genannten Probleme besser vermeiden. Beispielsweise kann die folgende Methode verwendet werden, um die Anzeige und das Ausblenden des Pickers aufzurufen

 this.$picker(Komponentenoptionen, {
 Wrapper: {
  Requisiten: {},
  An: {}
 },
 Requisiten: {},
 An: {}
 })

Option Erklärung

• Wrapper: Programmierparameter für die Picker-Funktion
• props: Optionenkonfiguration für Komponentenoptionen
• an: Zeitliche Bindung von Komponentenoptionen

Lösung

Verzeichnisabteilung

Komponenten
-BaseUsedComponents
- Kommissionierer
- Picker.vue
- index.js
- Haupt-JavaScript

Beschreiben des Picker-Containers

Picker.vue-Dateifunktion:

• Zeichnen Sie den Picker-Container
• Verwenden Sie die integrierte Übergangskomponente in Kombination mit CSS3-Animation, um Animationsübergänge zu erstellen

Der Code lautet wie folgt:

 <Übergangsname="Nach oben schieben">
 <div Klasse="Picker" v-if="anzeigen">
  <Steckplatz></Steckplatz>
  <div Klasse="Maske"></div>
 </div>
 </Übergang>

Erstellen eines Pickers

Ideenübersicht

• Definieren Sie eine Picker-Funktion, die Folgendes tun muss:
  • Generieren Sie eine Instanz von PickerPickerInstance
  • Setzen Sie PickerInstance.show auf true
  • Platzieren Sie den Picker-Container am unteren Rand des Körpers
• Die Generierung von Picker-Komponenten erfordert Anti-Shake-Maßnahmen und kann nicht unter kontinuierlichen Klicks durchgeführt werden
• Generieren Sie einen Vnode basierend auf den Eigenschaften und den Attributen der übergebenen Komponentenoptionen und platzieren Sie ihn im Standard-Slot.
• Wenn Sie auf das Maskenelement klicken, wird der Picker ausgeblendet. Daher müssen wir eine Ausblendmethode definieren.
• Die Hide-Methode muss die folgenden Probleme lösen
  • Setzen Sie das Show-Attribut unter der Instanz auf „false“
  • Löschen Sie den Picker-Container unter dem Textkörper
  • Setzen Sie die Instanz auf Null und rufen Sie GC auf

Picker-Funktion

• Rufen Sie die Funktion „Erstellen“ auf, um eine Picker-Instanz zu generieren
• Ermitteln, ob die Instanz vorhanden ist
• Aktuelle Komponentenoptionen und -konfiguration beibehalten
• Ändern Sie die Show-Eigenschaft der Picker-Komponente, um ein Popup-Fenster zu öffnen und es unter dem Textkörper einzufügen.

erstellen

• Erstellen Sie ein el als Container für den Picker und fügen Sie es unter dem Body ein
• In der Renderfunktion platziert Picker die zuvor übergebenen Komponentenoptionen als Standard-Slot darin und fungiert als Stammelement als untergeordnete Komponente der aktuellen Instanz.
• Holen Sie sich die entsprechende Übergangszeit in der gemounteten Funktion als Auslöser für die spätere Hide-Funktion.

Warum müssen wir die Animationszeit im requestAnimationFrame abrufen, anstatt sie direkt im Mounted zu erhalten?

Die gemountete Funktion der Komponente wird nach dem ersten Rendern aufgerufen, und die Toast-Komponente löst die Enter-Funktion des Übergangs aus, indem sie showStatus festlegt (obwohl die gemountete Funktion der Toast-Komponente zuvor aufgerufen wird, gibt es zu diesem Zeitpunkt keine Übergangsklasse im Toast-Dom). Zu diesem Zeitpunkt wird die Funktion data.setter ausgelöst, die den Watcher verteilt und aktualisiert, wodurch alle Vorgänge in nextTick (dh Microtask) ausgeführt werden. Die Aufrufreihenfolge lautet also wie folgt:

Toast-Komponente Mounted -> übergeordnete Komponente Mounted (das heißt, die Mounted-Funktion, in der wir uns jetzt befinden. Beachten Sie, dass die Übergangsentsperrfunktion nicht ausgelöst wird, da der Übergang in Toast das Attribut „apple“ nicht trägt, und daher die Übergangsklasse nicht hinzugefügt wird) -> nextTick() -> Toast-Komponente update(v-show) -> Übergang (v-show löst die Eingabefunktion aus) -> Toast-Dom fügt den Namen der Übergangsklasse hinzu -> window.getComputedStyle(toast), um toastDuration abzurufen, das wir auch in nextTick abrufen können. Da der Übergang während des gesamten Animationsprozesses aktiv ist und requestAnimationFrame zur Hook-Funktion zum Neuzeichnen (Painter) des Browsers gehört, wird er später als die Mikrotask ausgeführt, sodass wir ihn hier abrufen.

zeigen

• Ruft eine Instanz von Picker ab, das das Stammelement der Instanz ist.
• Markieren Sie das Mounted-Attribut, um anzuzeigen, dass es installiert wurde
• Überwachen Sie das Show-Attribut und rufen Sie die Hide-Funktion auf, wenn Show auf „False“ gesetzt ist.
• Unter den Körper einsetzen

verstecken

• Setzen Sie die Mounted-Eigenschaft auf „false“ zurück.
• Löschen Sie die in der Show-Funktion definierte Teardown-Listening-Funktion, um Speicher freizugeben
• Setzen Sie den Delayer als Hook-Funktion, um den echten DOM zu löschen

Warum setTimeout zum Löschen verwenden?

Bei der Verwendung der Überwachung „transitionend“ tritt ein Problem auf:

Vue selbst hört auf transitionend (oder animationend) im untergeordneten Knoten der Übergangskomponente
Nachdem die Animation abgeschlossen ist, wird die Übergangsklasse gelöscht und die Übergangseigenschaft verschwindet.
Laut Dokumentation wird die Übergangs-Hook-Funktion nicht ausgelöst, nachdem die Übergangseigenschaft verschwunden ist, und kann dann nicht mehr ausgelöst werden.
transitionend-Funktion, die dazu führen kann, dass remove nicht aufgerufen wird und der vorherige ToastConainer übrig bleibt

entfernen

Die Funktion remove löscht den realen DOM, löscht den Delayer, setzt den Timer und die Picker-Instanzen auf null und ruft GC auf.

Kinderkomponente aktualisieren

Nachdem die Picker-Komponente fertiggestellt wurde, wird festgestellt, dass die Props in der Komponente nicht aktualisiert wurden. Daher wird hier eine Funktion geschrieben, um die Aktualisierung der Komponente manuell auszulösen. Der Komponenten-Vnode hat 4 Hook-Funktionen. Beim Aktualisieren wird Prepatch aufgerufen. Es gibt zwei Werte. Der erste ist der letzte Vnode und der zweite ist der geänderte Vnode. Daher patchen wir den ursprünglichen Vnode und die Komponente in der PickerCommand-Funktion als alten Vnode des Diffs vor. Durch Aufrufen dieser Funktion kann die Komponente aktualisiert werden.

Abschluss

Die Picker-Komponente ist nur ein Beispiel und kann mit weiteren Methoden implementiert werden. Dies ist das Ende dieses Artikels über die globale Anrufimplementierung von Vue2.x Picker auf mobilen Endgeräten. Weitere relevante Inhalte zu globalen Anrufen von Vue2.x Picker finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!