Création d'écrans squelettes flexibles

Introduction

Dans ce projet, vous allez apprendre à créer un composant d'écran squelette flexible à l'aide de Vue.js. Un écran squelette est un modèle d'interface utilisateur qui affiche une version simplifiée de l'interface utilisateur avant que le contenu réel ne soit chargé, offrant une meilleure expérience utilisateur par rapport aux indicateurs de chargement traditionnels.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment utiliser Vue.js pour créer un composant d'écran squelette réutilisable
• Comment implémenter la structure de l'écran squelette sur la base des données fournies
• Comment appliquer une animation clignotante aux éléments de l'écran squelette

🏆 Réalisations

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

• Créer un composant d'écran squelette flexible à l'aide de Vue.js
• Appliquer des styles et des classes dynamiques aux éléments de l'écran squelette
• Implémenter un effet d'animation clignotante pour l'écran squelette

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 :

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

Dans cette structure :

• index.html est la page principale.
• components/list est le composant de liste fourni.
• components/Skeleton est le composant d'écran squelette.
• lib est le dossier qui stocke les dépendances du projet.
• css est le dossier qui stocke les styles du projet.

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 pour voir la page.

Créer le composant d'écran squelette

Dans cette étape, vous allez apprendre à utiliser les données paragraph transmises depuis index.html et à combiner les connaissances sur les composants récursifs Vue pour terminer l'écriture du composant d'écran squelette.

1. Ouvrez le fichier components/Skeleton/item.js.
2. Dans la variable ItemTemplate, ajoutez le code suivant :

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

Ce code créera la structure de l'écran squelette sur la base des données paragraph.

3. Dans la section Vue.component("item", {...}), implémentez les méthodes suivantes :

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 {};
  }
}

La méthode arrIs détermine s'il faut utiliser la propriété rows ou cols de l'objet paragraph pour rendre les composants imbriqués. La méthode classIs détermine la classe CSS à appliquer à l'élément d'écran squelette en fonction de la propriété type. La méthode styleIs détermine les styles à appliquer à l'élément d'écran squelette en fonction des propriétés style, rowStyle et colStyle.

4. Enregistrez le fichier item.js.

L'effet après la fin est le suivant :

Résumé

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