Eine gute Bewertung für die Lieferung

Einführung

In diesem Projekt lernst du, wie du eine mehrdimensionale Bewertungs Komponente mit Vue.js und der Element-UI Bibliothek erstellst. Die Bewertungs Komponente wird es Benutzern ermöglichen, verschiedene Aspekte einer Lieferung zu bewerten, wie die Liefergeschwindigkeit, den Geschmack der Lebensmittel und die Qualität der Verpackung.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du eine benutzerdefinierte Vue.js Komponente namens my-rate.vue erstellst, um die mehrdimensionale Bewertungsfunktionalität zu behandeln.
• Wie du die el-rate Komponente aus der Element-UI Bibliothek verwendest, um die einzelnen Bewertungsdimensionen zu implementieren.
• Wie du ein change Ereignis von der my-rate Komponente auslöst, um der übergeordneten Komponente mitzuteilen, wenn die Bewertungen aktualisiert werden.
• Wie du die Gestaltung und das Layout der Bewertungs Komponente anpassen, um den Designanforderungen zu entsprechen.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Eine wiederverwendbare Vue.js Komponente mit benutzerdefinierter Funktionalität zu erstellen.
• Die Element-UI Bibliothek verwenden, um komplexe Benutzeroberflächen Komponenten zu erstellen.
• Daten zwischen übergeordneten und untergeordneten Komponenten in einer Vue.js Anwendung zu verwalten und zu kommunizieren.
• Vue.js Komponenten mit CSS zu gestalten und auszurichten.

Projektsstruktur 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:

├── element-ui-2.6.2
│   ├── element-icons.ttf
│   ├── element-icons.woff
│   ├── element-ui.min.js
│   └── element-ui.style.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└──  my-rate.vue

Darin sind:

• index.html ist die Hauptseite.
• Der Ordner element-ui-2.6.2 enthält die Skriptdateien, Styledateien und Schriftarten, die mit der element-ui Bibliothek zusammenhängen.
• Der Ordner js enthält die Dateien, die mit den vue- und http-vue-loader Bibliotheken zusammenhängen.
• my-rate.vue ist die Datei der encapsulierten Bewertungs Komponente.

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 auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Die My-Rate Komponente vervollständigen

In diesem Schritt wirst du die my-rate.vue Komponente vervollständigen, um die mehrdimensionale Bewertungsfunktionalität zu implementieren.

1. Öffne die Datei my-rate.vue im Projektordner.
2. Im Abschnitt template füge die HTML-Struktur für die Bewertungs Komponente hinzu:

<div class="block">
  <span class="demonstration">Bewerten Sie die Lieferung: </span>
  <ul class="rate-list">
    <li>
      <!-- TODO: Vervollständigen der el-rate-Eigenschaft -->
      Liefergeschwindigkeit:
      <el-rate v-model="speed" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Vervollständigen der el-rate-Eigenschaft -->
      Geschmack der Lieferung:
      <el-rate v-model="flavor" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Vervollständigen der el-rate-Eigenschaft -->
      Verpackung der Lieferung:<el-rate
        v-model="pack"
        show-score
        @change="changeHandler"
      ></el-rate>
    </li>
  </ul>
</div>

Diese Struktur enthält drei el-rate Komponenten, eine für jede Bewertungsdimension: Geschwindigkeit, Geschmack und Verpackung.

3. Im Abschnitt <script> füge die changeHandler-Methode hinzu:

<script>
module.exports = {
  data() {
    return {
      speed: 0,
      flavor: 0,
      pack: 0
    };
  },
  /* TODO */
  methods: {
    changeHandler() {
      if (this.speed && this.flavor && this.pack) {
        const rate = {
          speed: this.speed,
          flavor: this.flavor,
          pack: this.pack
        };
        this.$emit("change", rate);
      }
    }
  }
};
</script>

Die data-Funktion gibt ein Objekt mit drei Eigenschaften zurück: speed, flavor und pack, die die aktuellen Bewertungswerte für jede Dimension speichern.

Die changeHandler-Methode wird aufgerufen, wenn die Bewertung für eine beliebige Dimension geändert wird. Sie überprüft, ob alle drei Bewertungen gesetzt sind, und wenn ja, löst sie ein change-Ereignis mit einem Objekt aus, das die aktualisierten Bewertungswerte enthält.

4. Speichere die Datei my-rate.vue.
5. Gehe zurück zum Browser und aktualisiere die Seite. Die abgeschlossene Schnittstelle ist wie in der Abbildung gezeigt:

Zusammenfassung

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