Element-plus的骨架屏

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

为什么要用骨架屏？

    项目开发时，本地预览快到飞起，服务器却总是拖后腿？还不是因为当用户在首次访问网站时，资源需要从服务器加载，而之后访问虽然不是全部资源重新下载，但是API接口的请求总还是要耗时的吧？

    这时候就会出现部分图片和静态文本资源加载完成，但是主要数据还在等待API访问，所以就需要有一些填充在网页中，给用户以加载中的视觉反馈。

    常见的当然那还是loading加载动画了，其次就是愈发流行的骨架屏。

    看个简单的例子APP中的骨架屏最是常见，但是网页中也有很多应用之地，例如掘金的文章页。虽然掘金的文章页加载挺快的，但应该是考虑到网络波动的情况，所以做了骨架屏。

    网络良好的情况下， 手速快也是可以截图到的。

    这里就以element-plus也就是Vue3的element组件库实现一个自定义的骨架屏吧。

<div class="content">
  <!-- 内容骨架屏 -->
  <el-skeleton style="width: 100%" direction="vertical" alignment="flex-start" :loading="loading" animated class="content-skeleton">
    <template #template>
      <div class="avatar" style="display: flex; align-items: center;">
        <el-skeleton-item variant="circle" 
        style="margin-bottom: 12px; width: 48px; height: 48px; background-color: #aaa;" />
        <div style="
          display: flex; 
          flex-direction: column; 
          position: relative; 
          bottom: 6npmpx;
          margin-left: 8px;">
          <el-skeleton-item variant="text" style="width: 80px; margin-bottom: 8px;" />
          <el-skeleton-item variant="text" style="width: 50px;" />
        </div>
      </div>
      <el-skeleton-item variant="rect" style="width: 100%; height: 240px; background-color: #aaa;" />
      <div style="padding: 12px 14px 0 0">
        <el-skeleton-item variant="h1" style="width: 50%;" />
        <el-skeleton-item variant="text" style="margin-top: 8px; margin-right: 16px" />
      </div>
    </template>
  </el-skeleton>
</div>

效果图如下

    可以说是完美copy了掘金的骨架屏了吧。

    当数据请求完成后通过控制loading的布尔值完成切换就可以了。