一文详解Vue中如何实现页面骨架屏

<template>
  <div class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-content">
      <div class="skeleton-item"></div>
      <div class="skeleton-item"></div>
      <div class="skeleton-item"></div>
    </div>
  </div>
</template>

<style>
.skeleton {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  padding: 20px;
}

.skeleton-header {
  width: 100%;
  height: 50px;
  background: #e0e0e0;
  margin-bottom: 20px;
}

.skeleton-content {
  display: flex;
  justify-content: space-between;
}

.skeleton-item {
  width: 30%;
  height: 100px;
  background: #e0e0e0;
}
</style>

<template>
  <div>
    <Skeleton v-if="loading" />
    <div v-else>
      <!-- 真实内容 -->
    </div>
  </div>
</template>

<script>
import Skeleton from './Skeleton.vue';

export default {
  data() {
    return {
      loading: true
    };
  },
  created() {
    // 模拟数据加载
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  },
  components: {
    Skeleton
  }
};
</script>

<script>
import { ContentLoader } from 'vue-content-loader'
export default {
  components: {
    ContentLoader,
  },
}
</script>

<template>
  <!-- <content-loader></content-loader> -->
  <ContentLoader viewBox="0 0 250 110">
  <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
  <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
</ContentLoader>
</template>

<script>
// 使用异步组件
import asyncomVue from "./asyncom.vue";
// 骨架屏占位组件
import skyeLoadVue from "./skyeLoad.vue";
export default {
  components: {
    asyncomVue,
    skyeLoadVue,
  },
};
</script>

<template>
  <Suspense>
    <!-- 包含异步的组件 -->
    <asyncomVue />
    <template #fallback>
      <!-- 骨架屏占位组件 -->
      <skyeLoadVue />
    </template>
  </Suspense>
</template>