Une bonne note pour la livraison à emporter

Introduction

Dans ce projet, vous allez apprendre à créer un composant de notation multidimensionnelle à l'aide de Vue.js et de la bibliothèque Element-UI. Le composant de notation permettra aux utilisateurs de noter différents aspects d'une commande de livraison à emporter, comme la rapidité de livraison, le goût de la nourriture et la qualité de l'emballage.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment créer un composant personnalisé Vue.js appelé my-rate.vue pour gérer la fonctionnalité de notation multidimensionnelle.
• Comment utiliser le composant el-rate de la bibliothèque Element-UI pour implémenter les dimensions de notation individuelles.
• Comment émettre un événement change à partir du composant my-rate pour informer le composant parent lorsque les notations sont mises à jour.
• Comment personnaliser la mise en forme et la disposition du composant de notation pour correspondre aux exigences de conception.

🏆 Réalisations

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

• Créer un composant Vue.js réutilisable avec une fonctionnalité personnalisée.
• Utiliser la bibliothèque Element-UI pour construire des composants d'interface utilisateur complexes.
• Gérer et communiquer des données entre les composants parents et enfants dans une application Vue.js.
• Mettre en forme et disposer des composants Vue.js à l'aide de CSS.

Skills Graph

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── 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

Dans ce qui précède :

• index.html est la page principale.
• Le dossier element-ui-2.6.2 contient les fichiers de script, les fichiers de style et les polices liées à la bibliothèque element-ui.
• Le dossier js contient les fichiers liés aux bibliothèques vue et http-vue-loader.
• my-rate.vue est le fichier du composant de notation encapsulé.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Terminer le composant My-Rate

Dans cette étape, vous allez terminer le composant my-rate.vue pour implémenter la fonctionnalité de notation multidimensionnelle.

1. Ouvrez le fichier my-rate.vue dans le dossier du projet.
2. Dans la section template, ajoutez la structure HTML pour le composant de notation :

<div class="block">
  <span class="demonstration">Veuillez noter la livraison à emporter : </span>
  <ul class="rate-list">
    <li>
      <!-- TODO : Compléter la propriété el-rate -->
      Vitesse de livraison :
      <el-rate v-model="speed" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO : Compléter la propriété el-rate -->
      Saveurs de la livraison à emporter :
      <el-rate v-model="flavor" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO : Compléter la propriété el-rate -->
      Emballage de la livraison à emporter :<el-rate
        v-model="pack"
        show-score
        @change="changeHandler"
      ></el-rate>
    </li>
  </ul>
</div>

Cette structure inclut trois composants el-rate, un pour chaque dimension de notation : vitesse, saveur et emballage.

3. Dans la section <script>, ajoutez la méthode changeHandler :

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

La fonction data renvoie un objet avec trois propriétés : speed, flavor et pack, qui stockent les valeurs de notation actuelles pour chaque dimension.

La méthode changeHandler est appelée lorsque la notation de n'importe quelle dimension change. Elle vérifie si les trois notations ont été définies, et si c'est le cas, elle émet un événement change avec un objet contenant les valeurs de notation mises à jour.

4. Enregistrez le fichier my-rate.vue.
5. Revenez au navigateur et rafraîchissez la page. L'interface complétée est comme montrée dans la figure :

Sommaire

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