使用 Vue.js 构建灵活的骨架屏

介绍

在这个项目中，你将学习如何使用 Vue.js 创建一个灵活的骨架屏组件。骨架屏是一种用户界面模式，它在实际内容加载之前显示用户界面的简化版本，与传统的加载指示器相比，能提供更好的用户体验。

👀 预览

🎯 任务

在这个项目中，你将学习：

如何使用 Vue.js 创建一个可复用的骨架屏组件
如何根据提供的数据实现骨架屏的结构
如何为骨架屏元素应用闪烁动画

🏆 成果

完成这个项目后，你将能够：

使用 Vue.js 创建一个灵活的骨架屏组件
为骨架屏元素应用动态样式和类
为骨架屏实现闪烁动画效果

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── 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 是存储项目样式的文件夹。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

✨ 查看解决方案并练习

创建骨架屏组件

在这一步中，你将学习如何使用从 index.html 传递过来的数据 paragraph，并结合Vue 递归组件的知识来完成骨架屏组件的编写。

打开 components/Skeleton/item.js 文件。
在 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 数据创建骨架屏的结构。

在 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 方法确定是使用 paragraph 对象的 rows 还是 cols 属性来渲染嵌套组件。classIs 方法根据 type 属性确定应用于骨架屏元素的 CSS 类。styleIs 方法根据 style、rowStyle 和 colStyle 属性确定应用于骨架屏元素的样式。

保存 item.js 文件。

完成后的效果如下：

✨ 查看解决方案并练习

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。