Flexible Skeleton Screens erstellen

Einführung

In diesem Projekt lernst du, wie du mithilfe von Vue.js einen flexiblen Skeleton-Screen-Komponenten erstellen kannst. Ein Skeleton Screen ist ein UI-Muster, das eine vereinfachte Version der Benutzeroberfläche vor dem Laden des tatsächlichen Inhalts anzeigt und im Vergleich zu traditionellen Ladeindikatoren eine bessere Benutzererfahrung bietet.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du mithilfe von Vue.js einen wiederverwendbaren Skeleton-Screen-Komponenten erstellst
• Wie du die Struktur des Skeleton Screens basierend auf den bereitgestellten Daten implementierst
• Wie du eine Blinkanimation auf die Skeleton-Screen-Elemente anwendest

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein flexiblen Skeleton-Screen-Komponenten mit Vue.js zu erstellen
• Dynamische Stile und Klassen auf die Skeleton-Screen-Elemente anzuwenden
• Eine Blinkanimationseffekt für den Skeleton Screen zu implementieren

Projektstruktur einrichten

In diesem Schritt wirst du die Projektdateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── components
│   ├── List
│   │   ├── content.js
│   │   └── index.js
│   └── Skeleton
│       ├── index.js
│       └── item.js
├── css
│   └── style.css
├── index.html
└── lib
    └── vue.min.js

Darin:

• index.html ist die Hauptseite.
• components/list ist die bereitgestellte Listenkomponente.
• components/Skeleton ist die Skeleton-Screen-Komponente.
• lib ist der Ordner, in dem die Projektabhängigkeiten gespeichert werden.
• css ist der Ordner, in dem die Projektstile gespeichert werden.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, und du wirst die Seite sehen.

Skeleton-Screen-Komponente erstellen

In diesem Schritt wirst du lernen, wie du die von index.html übergebene Daten paragraph verwenden und die Kenntnisse über Vue rekursive Komponenten kombinieren, um die Schreibweise der Skeleton-Screen-Komponente abzuschließen.

1. Öffne die Datei components/Skeleton/item.js.
2. Füge im Variablen ItemTemplate folgenden Code hinzu:

let ItemTemplate = ``;
// TODO
ItemTemplate += `
<div :class="'ske-'+paragraph.type+'-container'">
  <div v-for="item in arrIs(paragraph)" :class="classIs(item)" :style="styleIs(item)" >
    <item :paragraph="item" :active="active"></item>
  </div>
</div>
`;

Dieser Code erstellt die Struktur des Skeleton Screens basierend auf den Daten paragraph.

3. Im Abschnitt Vue.component("item", {...}) implementiere die folgenden Methoden:

data() {
  return {
    typeList: ["rect", "circle"],
    classPrefix: "ske ske-",
    activeClass: " ske-ani"
  };
},
methods: {
  arrIs(obj) {
    if (obj?.rows) return obj.rows;
    else if (obj?.cols) return obj.cols;
    else return [];
  },
  classIs(obj) {
    if (this.typeList.includes(obj.type)) {
      return (
        this.classPrefix + obj.type + (this.active? this.activeClass : "")
      );
    } else {
      return this.classPrefix + obj.type;
    }
  },
  styleIs(obj) {
    if (obj?.style && obj?.rowStyle) return {...obj.style,...obj.rowStyle };
    else if (obj?.style) return obj.style;
    else if (obj?.rowStyle) return obj.rowStyle;
    else if (obj?.colStyle) return obj.colStyle;
    else return {};
  }
}

Die Methode arrIs bestimmt, ob die rows- oder cols-Eigenschaft des paragraph-Objekts verwendet werden soll, um die geschachtelten Komponenten zu rendern. Die Methode classIs bestimmt die CSS-Klasse, die auf das Skeleton-Screen-Element angewandt werden soll, basierend auf der type-Eigenschaft. Die Methode styleIs bestimmt die Stile, die auf das Skeleton-Screen-Element angewandt werden sollen, basierend auf den style, rowStyle- und colStyle-Eigenschaften.

4. Speichere die Datei item.js.

Das Ergebnis nach Abschluss sieht wie folgt aus:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.