Construire un lecteur d'e-books avec Vue.js

Introduction

Dans ce projet, vous apprendrez à construire un simple lecteur d'e-books en utilisant Vue 2.x. Le lecteur d'e-books permettra aux utilisateurs de basculer la visibilité de la barre d'outils de l'en-tête, de définir le thème de lecture et d'ajuster la taille de police du contenu textuel.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous apprendrez :

• Comment implémenter le basculement de la visibilité de la barre d'outils de l'en-tête
• Comment implémenter la définition du thème de lecture
• Comment implémenter la définition de la taille de police

🏆 Réalisations

Après avoir terminé ce projet, vous serez en mesure de :

• Utiliser Vue.js pour créer des interfaces utilisateur interactives
• Gérer les interactions utilisateur et mettre à jour l'interface utilisateur en conséquence
• Styler dynamiquement les éléments en fonction des préférences de l'utilisateur
• Vérifier que l'application reste réactive et accessible

Implémenter le basculement de la visibilité de la barre d'outils de l'en-tête

Pour commencer, regardez la structure de répertoire des fichiers à gauche, qui est la suivante :

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

Où :

• index.html est la page principale et le prochain fichier que vous devrez modifier.
• css est le dossier pour les fichiers de style.
• js/vue.js est le fichier Vue 2.x.

Ensuite, vous effectuerez toutes les opérations dans le fichier index.html.

Dans cette étape, vous apprendrez à implémenter le basculement de la visibilité de la barre d'outils de l'en-tête. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier index.html, définissez la variable isShowTools dans les données sous el: "#app" pour contrôler l'affichage de la barre d'outils de l'en-tête, avec une valeur par défaut de true pour afficher la barre d'outils de l'en-tête.

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

2. Enveloppez le contenu de la barre d'outils de l'en-tête (l'élément <div class="header">) dans un élément <transition> avec la directive v-if, en le liant à la propriété de données isShowTools. Cela garantira que la barre d'outils de l'en-tête n'est visible que lorsque isShowTools est true.

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- contenu de la barre d'outils de l'en-tête -->
  </div>
</transition>

3. Dans le fichier index.html, localisez l'élément <a> avec la classe iconfont icon-setting. Cet élément est utilisé pour basculer la visibilité de la barre d'outils de l'en-tête.
4. Ajoutez une directive @click à l'élément <a> et liez-la à une méthode showTools dans l'instance Vue. Cette méthode basculera la propriété de données isShowTools, qui contrôle la visibilité de la barre d'outils de l'en-tête.

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

5. Dans l'instance Vue, ajoutez la méthode showTools à l'objet methods. Cette méthode devrait basculer la valeur de la propriété de données isShowTools.

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

6. Ajoutez une icône close à la barre d'outils de l'en-tête et liez une directive @click à la méthode showTools pour permettre à l'utilisateur de fermer la barre d'outils de l'en-tête.

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

Implémenter la définition du thème de lecture

Dans cette étape, vous apprendrez à implémenter la définition du thème de lecture. Suivez les étapes ci-dessous pour terminer cette étape :

1. Définissez la variable isActiveColor dans les données sous el: "#app" et attribuez-lui la valeur par défaut 0, c'est-à-dire que la couleur de fond par défaut est la première couleur sélectionnée. Dans le fichier index.html, localisez l'élément <div class="right" id="setBG">. C'est là que les blocs de couleur circulaires pour le thème de lecture seront affichés.

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

2. Utilisez une directive v-for pour parcourir la propriété de données bgList, qui contient la liste des couleurs de thème. Pour chaque couleur, créez un élément <a> avec une directive @click qui appelle la méthode changeColor, en passant l'index actuel comme argument.

<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. Dans l'instance Vue, ajoutez la méthode changeColor à l'objet methods. Cette méthode devrait mettre à jour la propriété de données isActiveColor avec l'index du bloc de couleur sélectionné.

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

4. Dans l'élément <p> avec la classe text-content, utilisez la directive :style pour définir dynamiquement la couleur de fond et la couleur de police en fonction de la couleur de thème sélectionnée.

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

Implémenter la définition de la taille de police

Dans cette étape, vous apprendrez à implémenter la définition de la taille de police. Suivez les étapes ci-dessous pour terminer cette étape :

1. Définissez la variable "fontSize" dans les données sous el: "#app" et attribuez-lui la valeur par défaut "18". Dans le fichier index.html, localisez l'élément <div class="set-font">. C'est là que les contrôles de taille de police seront affichés.

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

2. Localisez <span class="lang">18</span> et remplacez 18 par la variable fontSize.

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

3. Ajoutez des directives @click aux boutons "A-" et "A+", en les liant à la méthode updateFontSize dans l'instance Vue. Passez une valeur booléenne pour indiquer si la taille de police doit être augmentée ou diminuée.

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

4. Dans l'instance Vue, ajoutez la méthode updateFontSize à l'objet methods. Cette méthode devrait mettre à jour la propriété de données fontSize, en s'assurant que la taille de police reste dans la plage de 12px à 48px.

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

5. Dans l'élément <p> avec la classe text-content, utilisez la directive :style pour définir dynamiquement la taille de police et l'interligne en fonction de la propriété de données fontSize.

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

En suivant ces étapes, vous avez terminé l'implémentation des fonctionnalités du lecteur d'e-books, y compris le basculement de la visibilité de la barre d'outils de l'en-tête, la définition du thème de lecture et la définition de la taille de police.

Ensuite, cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet. Ouvrez "Web 8080" en haut de la machine virtuelle et actualisez-la manuellement, et vous verrez la page.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires (labs) sur LabEx pour améliorer vos compétences.