Erstellen Sie einen Vue.js-E-Book-Reader

Einführung

In diesem Projekt lernen Sie, wie Sie einen einfachen E-Book-Reader mit Vue 2.x erstellen. Der E-Book-Reader ermöglicht es Benutzern, die Sichtbarkeit der Kopfzeilentoolbar umzuschalten, das Lesethema festzulegen und die Schriftgröße des Textinhalts anzupassen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie Sie die Umschaltung der Sichtbarkeit der Kopfzeilentoolbar implementieren
• Wie Sie die Einstellung des Lesethemas implementieren
• Wie Sie die Einstellung der Schriftgröße implementieren

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

• Vue.js verwenden, um interaktive Benutzeroberflächen zu erstellen
• Benutzerinteraktionen verarbeiten und die Benutzeroberfläche entsprechend aktualisieren
• Elemente dynamisch basierend auf Benutzerpräferenzen gestalten
• Sicherstellen, dass die Anwendung reaktionsfähig und zugänglich bleibt

Skills Graph

Implementieren Sie die Umschaltung der Sichtbarkeit der Kopfzeilentoolbar

Um loszulegen, schauen Sie sich die Verzeichnisstruktur der Dateien auf der linken Seite wie folgt an:

├── index.html
├── css
└── js
    └── vue.js

Hierbei gilt:

• index.html ist die Hauptseite und die nächste Datei, die Sie bearbeiten müssen.
• css ist der Ordner für Stildateien.
• js/vue.js ist die Vue 2.x-Datei.

Als Nächstes führen Sie alles in der index.html-Datei aus.

In diesem Schritt lernen Sie, wie Sie die Umschaltung der Sichtbarkeit der Kopfzeilentoolbar implementieren. Befolgen Sie die folgenden Schritte, um diesen Schritt abzuschließen:

1. Öffnen Sie die index.html-Datei und definieren Sie die Variable isShowTools in data unter el: "#app", um die Anzeige der Kopfzeilentoolbar zu steuern. Der Standardwert ist true, um die Kopfzeilentoolbar anzuzeigen.

data: {
  isShowTools: true,
  //...
}

2. Umgeben Sie den Inhalt der Kopfzeilentoolbar (das <div class="header">-Element) mit einem <transition>-Element mit der v-if-Direktive und binden Sie es an die isShowTools-Daten-Eigenschaft. Dadurch wird sichergestellt, dass die Kopfzeilentoolbar nur sichtbar ist, wenn isShowTools true ist.

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- header toolbar content -->
  </div>
</transition>

3. Suchen Sie in der index.html-Datei das <a>-Element mit der Klasse iconfont icon-setting. Dieses Element wird verwendet, um die Sichtbarkeit der Kopfzeilentoolbar umzuschalten.
4. Fügen Sie dem <a>-Element eine @click-Direktive hinzu und binden Sie sie an eine showTools-Methode in der Vue-Instanz. Diese Methode wird die isShowTools-Daten-Eigenschaft umschalten, die die Sichtbarkeit der Kopfzeilentoolbar steuert.

<a @click="showTools" class="iconfont icon-setting"></a>

5. Fügen Sie in der Vue-Instanz die showTools-Methode dem methods-Objekt hinzu. Diese Methode sollte den Wert der isShowTools-Daten-Eigenschaft umschalten.

methods: {
  showTools() {
    this.isShowTools =!this.isShowTools;
  },
}

6. Fügen Sie der Kopfzeilentoolbar ein close-Symbol hinzu und binden Sie eine @click-Direktive an die showTools-Methode, damit der Benutzer die Kopfzeilentoolbar schließen kann.

<li class="container">
  <a @click="showTools" class="iconfont icon-close"></a>
</li>

Implementieren Sie die Einstellung des Lesethemas

In diesem Schritt lernen Sie, wie Sie die Einstellung des Lesethemas implementieren. Befolgen Sie die folgenden Schritte, um diesen Schritt abzuschließen:

1. Definieren Sie die Variable isActiveColor in den Daten unter el: "#app" und setzen Sie den Standardwert auf 0, d. h. die Standardhintergrundfarbe ist die erste ausgewählte Farbe. Suchen Sie in der index.html-Datei das <div class="right" id="setBG">-Element. Hier werden die kreisförmigen Farbblöcke für das Lesethema angezeigt.

data: {
  isActiveColor: 0,
  //...
}

2. Verwenden Sie eine v-for-Direktive, um die bgList-Daten-Eigenschaft zu durchlaufen, die die Liste der Themefarben enthält. Für jede Farbe erstellen Sie ein <a>-Element mit einer @click-Direktive, die die changeColor-Methode aufruft und den aktuellen Index als Argument übergibt.

<div class="right" id="setBG">
  <a
    @click="changeColor(index)"
    v-for="(item,index) in bgList"
    :style="{'background-color':item}"
    :class="{'iconfont':true,'icon-selected':index==isActiveColor}"
  ></a>
</div>

3. Fügen Sie in der Vue-Instanz die changeColor-Methode dem methods-Objekt hinzu. Diese Methode sollte die isActiveColor-Daten-Eigenschaft mit dem Index des ausgewählten Farbblocks aktualisieren.

methods: {
  changeColor(value) {
    this.isActiveColor = value;
  },
}

4. Verwenden Sie in dem <p>-Element mit der Klasse text-content die :style-Direktive, um die Hintergrundfarbe und Schriftfarbe dynamisch basierend auf der ausgewählten Themefarbe festzulegen.

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4? '#ffffff' : '#333333'
  }"
>
  <!-- content -->
</p>

Implementieren Sie die Einstellung der Schriftgröße

In diesem Schritt lernen Sie, wie Sie die Einstellung der Schriftgröße implementieren. Befolgen Sie die folgenden Schritte, um diesen Schritt abzuschließen:

1. Definieren Sie die Variable "fontSize" in den Daten unter el: "#app" und setzen Sie den Standardwert auf "18". Suchen Sie in der index.html-Datei das <div class="set-font">-Element. Hier werden die Steuerelemente für die Schriftgröße angezeigt.

data: {
  fontSize: 18,
  //...
}

2. Suchen Sie <span class="lang">18</span> und ersetzen Sie die 18 durch die fontSize-Variable.

<span class="lang">{{ fontSize }}</span>

3. Fügen Sie den Buttons "A-" und "A+" @click-Direktiven hinzu und binden Sie sie an die updateFontSize-Methode in der Vue-Instanz. Übergeben Sie einen booleschen Wert, um anzugeben, ob die Schriftgröße erhöht oder verringert werden soll.

<a @click="updateFontSize(false)" class="prev">A-</a>
<a @click="updateFontSize(true)" class="next">A+</a>

4. Fügen Sie in der Vue-Instanz die updateFontSize-Methode dem methods-Objekt hinzu. Diese Methode sollte die fontSize-Daten-Eigenschaft aktualisieren und sicherstellen, dass die Schriftgröße im Bereich von 12px bis 48px bleibt.

methods: {
  updateFontSize(flag) {
    if (flag) {
      if (this.fontSize < 48) {
        this.fontSize += 2;
      }
    } else {
      if (this.fontSize > 12) {
        this.fontSize -= 2;
      }
    }
  }
}

5. Verwenden Sie in dem <p>-Element mit der Klasse text-content die :style-Direktive, um die Schriftgröße und Zeilenhöhe dynamisch basierend auf der fontSize-Daten-Eigenschaft festzulegen.

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4? '#ffffff' : '#333333',
    'font-size': `${fontSize}px`,
    'line-height': `${fontSize + 10}px`
  }"
>
  <!-- content -->
</p>

Indem Sie diese Schritte befolgen, haben Sie die Implementierung der E-Book-Reader-Funktionen abgeschlossen, einschließlich der Umschaltung der Sichtbarkeit der Kopfzeilentoolbar, der Einstellung des Lesethemas und der Einstellung der Schriftgröße.

Klicken Sie als Nächstes auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen. Öffnen Sie "Web 8080" oben auf der VM und aktualisieren Sie die Seite manuell, und Sie werden die Seite sehen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.