Vollständiger Schrittbericht der TabBar-Komponente der Vue-Kapselung

Umsetzungsideen:

Schritt 1: Komponentenkapselung von TabBar und TabBarItem

An diesem Punkt können Sie feststellen, dass das grundlegende Layout der Seite implementiert wurde, der aktive Status des Elementklicks jedoch nicht implementiert wurde.

Schritt 2: Übergeben Sie das aktive Bild an TabBarItem

Um zu verhindern, dass der ersetzte Inhalt den gesamten Slot direkt ersetzt, sodass der im Slot definierte Stil auch vom Ersetzen betroffen ist, ist es am besten, einen Div-Wrapper außerhalb des Slots zu definieren

Schritt 3: Die Kombination aus TabBarItem und Routing

Schritt 4: TabBarItem-Farbsteuerung

Es ist grundsätzlich abgeschlossen, aber es wird festgestellt, dass das wiederholte Klicken auf den Pfad in der Route zu einem Fehler führt

Fehlerursache:

Dies liegt daran, dass das Rückrufformat von vue-router ≥ 3.0 in Promise geändert wurde. Wenn kein Fehler abgefangen wird, wird diese Art von Fehlerwarnung in der Konsole angezeigt.

Lösung 1: Downgrade von vue-router auf Version 3.0

npm ich [email protected] -S 

Lösung 2:

Schreiben Sie die Push- und Replace-Methoden in der Router-Prototypkette neu, sodass Sie nicht bei jedem Aufruf der Methode einen Catch hinzufügen müssen.

Schreiben Sie den folgenden Inhalt in main.js:

Router von „vue-router“ importieren
 
const originalPush = Router.prototype.push
Router.prototype.push = Funktion Push(Standort, bei Lösung, bei Ablehnung) {
  if (bei Lösung || bei Ablehnung) returniere originalPush.call(dies, Standort, bei Lösung, bei Ablehnung)
  gebe originalPush.call(diesen, Standort).catch(err => err) zurück
}

Wenn die Push-Änderung immer noch nicht wirksam wird, können Sie beispielsweise die Ersetzungsmethode versuchen:

const originalReplace = Router.prototype.replace;
Router.prototype.replace = Funktion Ersetzen(Standort) {
  gib originalReplace.call(diesen, Standort).catch(err => err);
};

Umgesetzt mit Schriftsymbolen

Einführung von Schriftsymbolen

verwenden

Zusammenfassen

Dies ist das Ende dieses Artikels über die Vue-Kapselung der TabBar-Komponente. Weitere relevante Vue-Kapselungsinhalte für TabBar-Komponenten 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!