Construindo Telas de Esqueleto Flexíveis

Introdução

Neste projeto, você aprenderá como criar um componente de tela de esqueleto flexível usando Vue.js. Uma tela de esqueleto é um padrão de UI que exibe uma versão simplificada da interface do usuário antes que o conteúdo real seja carregado, proporcionando uma melhor experiência do usuário em comparação com os indicadores de carregamento tradicionais.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como usar Vue.js para criar um componente de tela de esqueleto reutilizável
• Como implementar a estrutura da tela de esqueleto com base nos dados fornecidos
• Como aplicar a animação de piscar aos elementos da tela de esqueleto

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar um componente de tela de esqueleto flexível usando Vue.js
• Aplicar estilos e classes dinâmicos aos elementos da tela de esqueleto
• Implementar um efeito de animação de piscar para a tela de esqueleto

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

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

Entre eles:

• index.html é a página principal.
• components/list é o componente de lista fornecido.
• components/Skeleton é o componente da tela de esqueleto.
• lib é a pasta que armazena as dependências do projeto.
• css é a pasta que armazena os estilos do projeto.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Criar o Componente da Tela de Esqueleto

Nesta etapa, você aprenderá como usar os dados paragraph passados de index.html e combinar o conhecimento de componentes recursivos Vue para completar a escrita do componente da tela de esqueleto.

1. Abra o arquivo components/Skeleton/item.js.
2. Na variável ItemTemplate, adicione o seguinte 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 criará a estrutura da tela de esqueleto com base nos dados paragraph.

3. Na seção Vue.component("item", {...}), implemente os seguintes 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 {};
  }
}

O método arrIs determina se deve usar a propriedade rows ou cols do objeto paragraph para renderizar os componentes aninhados. O método classIs determina a classe CSS a ser aplicada ao elemento da tela de esqueleto com base na propriedade type. O método styleIs determina os estilos a serem aplicados ao elemento da tela de esqueleto com base nas propriedades style, rowStyle e colStyle.

4. Salve o arquivo item.js.

O efeito após a conclusão é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.