组件封装 - 骨架屏组件

骨架屏组件的主要作用就是用来, 当后端的数据还没有返回的时候; 页面的数据还是空白的, 当后端数据加载完成之后.

现在用户就会看见一个效果就是 "闪屏" 效果, 原本这个地方是空白的; 突然就出现内容了, 这样用户的体验感就不太好.

那么解决方案其实有很多, 如: 

1. 放一张图片上去, 当数据返回之后; 让图片隐藏, 显示数据

2. 设置一个 loading 效果

3. 使用骨架屏

......

那么现在我们就来聊一聊, 如何去封装一个骨架屏组件(Vue3)

主体思路分析:

1. 首先骨架屏组件肯定是一个通用的组件, 所以我们需要将其放到 components 文件里面

2. 我们需要将 components 文件里面, 所有的通用组件进行全局注册; 这样, 我们封装的组件就可以在项目任何地方, 像使用标签一样使用组件

3. 实现骨架屏, 我们一共需要使用到两个盒子(其实一个也可以)

4. 一个是父盒子, 一个是子盒子; 父盒子用来控制 height width , 还需要设置一些对子盒子约束的样式

5. 子盒子用来控制背景颜色

6. 给父盒子添加一个伪元素, 让伪元素不断的做动画; 给这个伪元素添加绝对定位, 这样就可以覆盖掉子盒子

代码实现:

当然, 想让骨架屏适用于所有的地方的话

就必须暴露出一些属性:

1. 宽度

2. 高度

3. 背景颜色

4. 是否需要动画

<template>
  <div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}">
    <!-- 1 盒子-->
    <d