实现骨架屏 loading

现有的骨架屏有两种实现方式：

1. 方式一：常规方式实现，我们需要自定义额外的标签和样式代码来实现。
2. 方式二：CSS方式实现，利用已有的标签，添加一个渐变色通过改变背景大小来实现骨架屏

方式一：常规方式实现

当我们使用 elementui 的时候，可以使用内置组件来实现，它是使用 Div 布局自定义骨架屏。

<template>
  <el-skeleton style="width: 240px">
    <template slot="template">
      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
      <div style="padding: 14px;">
        <el-skeleton-item variant="p" style="width: 50%" />
        <div
          style="display: flex; align-items: center; justify-items: space-between;"
        >
          <el-skeleton-item variant="text" style="margin-right: 16px;" />
          <el-skeleton-item variant="text" style="width: 30%;" />
        </div>
      </div>
    </template>
  </el-skeleton>
</template>

方式二：CSS方式实现:

给需要添加骨架屏的 div 添加元素属性 :skeleton="true"

*[skeleton='true'] > div:not([skeleton='true']) {
  background-image: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%) !important;
  background-size: 300% 100% !important;
  animation: skeleton-loading 1.4s infinite ease !important;
  border: none !important;
  min-height: 25px;
}
*[skeleton='true'] > div:not([skeleton='true']) > * {
  display: none !important;
}
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

不积跬步，无以至千里