Vue3项目中的骨架屏

实现场景:刚进入页面的时候,需要后端接口回传的数据,还没有回来,为了客户有更好的体验,需要设置骨架屏,效果图如下:

 实现步骤:

1.设置通用组件骨架屏(可以设置的属性:高，宽，背景颜色，是否有闪动画)

基本传值如下图:

2.设置业务组件骨架屏

1).设置通用组件骨架屏基本构建

 src/components/library/Skeleton.vue

<template>
<div class="skeleton" :style="{width,height}" :class="{shan:animated}">
<!-- 1 盒子-->
<div class="block" :style="{backgroundColor:bg}"></div>  //一个盒子包含了另一个盒子,样式写在