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>