vue实现骨架屏加载

Vue3API-Suspense实现骨架屏加载

1.使用vue-vue-content-loader
打开一个页面时候，页面内容多，接口请求慢或者说加载速度慢时，会导致页面出现较长时间出现空白页面，影响的体验感，可以使用vue-content-loader解决这些场景问题。

---

2.安装 npm i vue-content-loader

1.skyeLoadVue.vue
<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>

3.使用标签Suspense包裹

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