Создание гибких скелетных экранов

Введение

В этом проекте вы научитесь создавать гибкий компонент скелетного экрана с использованием Vue.js. Скелетный экран - это UI-шаблон, который отображает упрощенную версию пользовательского интерфейса до загрузки фактического контента, обеспечивая лучший пользовательский опыт по сравнению с традиционными индикаторами загрузки.

👀 Превью

🎯 Задачи

В этом проекте вы научитесь:

• Как использовать Vue.js для создания повторно используемого компонента скелетного экрана
• Как реализовать структуру скелетного экрана на основе предоставленных данных
• Как применить мигающую анимацию к элементам скелетного экрана

🏆 Достижения

После завершения этого проекта вы сможете:

• Создать гибкий компонент скелетного экрана с использованием Vue.js
• Применить динамические стили и классы к элементам скелетного экрана
• Реализовать эффект мигающей анимации для скелетного экрана

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

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

В них:

• index.html - главная страница.
• components/list - предоставленный компонент списка.
• components/Skeleton - компонент скелетного экрана.
• lib - папка, в которой хранятся зависимости проекта.
• css - папка, в которой хранятся стили проекта.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Создание компонента скелетного экрана

В этом шаге вы научитесь использовать данные paragraph, переданные из index.html, и объединить знания о рекурсивных компонентах Vue, чтобы завершить написание компонента скелетного экрана.

1. Откройте файл components/Skeleton/item.js.
2. В переменной ItemTemplate добавьте следующий код:

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

Этот код создаст структуру скелетного экрана на основе данных paragraph.

3. В разделе Vue.component("item", {...}) реализуйте следующие методы:

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

Метод arrIs определяет, использовать ли свойство rows или cols объекта paragraph для рендеринга вложенных компонентов. Метод classIs определяет CSS-класс, который нужно применить к элементу скелетного экрана на основе свойства type. Метод styleIs определяет стили, которые нужно применить к элементу скелетного экрана на основе свойств style, rowStyle и colStyle.

4. Сохраните файл item.js.

Эффект после завершения выглядит так:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.