Construyendo pantallas esqueléticas flexibles

Introducción

En este proyecto, aprenderás a crear un componente de pantalla esqueleto flexible utilizando Vue.js. Una pantalla esqueleto es un patrón de interfaz de usuario que muestra una versión simplificada de la interfaz de usuario antes de que se cargue el contenido real, lo que proporciona una mejor experiencia de usuario en comparación con los indicadores de carga tradicionales.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo utilizar Vue.js para crear un componente de pantalla esqueleto reusable
• Cómo implementar la estructura de la pantalla esqueleto basada en los datos proporcionados
• Cómo aplicar una animación parpadeante a los elementos de la pantalla esqueleto

🏆 Logros

Después de completar este proyecto, podrás:

• Crear un componente de pantalla esqueleto flexible utilizando Vue.js
• Aplicar estilos y clases dinámicos a los elementos de la pantalla esqueleto
• Implementar un efecto de animación parpadeante para la pantalla esqueleto

Skills Graph

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Entre ellos:

• index.html es la página principal.
• components/list es el componente de lista proporcionado.
• components/Skeleton es el componente de pantalla esqueleto.
• lib es la carpeta que almacena las dependencias del proyecto.
• css es la carpeta que almacena los estilos del proyecto.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Crear el componente de pantalla esqueleto

En este paso, aprenderás a utilizar los datos paragraph pasados desde index.html y a combinar los conocimientos de componentes recursivos de Vue para completar la escritura del componente de pantalla esqueleto.

1. Abre el archivo components/Skeleton/item.js.
2. En la variable ItemTemplate, agrega el siguiente código:

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

Este código creará la estructura de la pantalla esqueleto basada en los datos paragraph.

3. En la sección Vue.component("item", {...}), implementa los siguientes métodos:

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

El método arrIs determina si se debe utilizar la propiedad rows o cols del objeto paragraph para renderizar los componentes anidados. El método classIs determina la clase CSS que se debe aplicar al elemento de la pantalla esqueleto basado en la propiedad type. El método styleIs determina los estilos que se deben aplicar al elemento de la pantalla esqueleto basado en las propiedades style, rowStyle y colStyle.

4. Guarda el archivo item.js.

El efecto después de completar es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.