Vue3中封装骨架屏的效果

前言

骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。 今天我们就讲一下，如何在Vue3中封装骨架效果

为什么需要骨架屏？

• 当用户刚打开网页的时候，后台还没有返回数据，页面没有办法渲染。
• 如果用户正好网络状态不是很好，如果页面什么都不显示的话，用户极有可能直接选择退出了。
• 骨架屏可以起到一个占位的作用，用户看到后就能知道此处有内容正在加载。

二、如何封装？

通过插件的方式，注册为全局组件。
类似elementUI、vant等组件库中，都有骨架屏的效果展示，不太理解的小伙伴儿可以去看看。
element官网：骨架屏(PC端)
vant官网：骨架屏(移动设备)

1. 准备组件

在src/components文件夹中新建一个skeleton.vue的文件：
代码如下（实例）

<template>
  <div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}">
    <!-- 1 盒子-->
    <div class="block" :style="{backgroundColor:bg}"></div>
    <!-- 2 闪效果 xtx-skeleton 伪元素 --->
  </div>
</template>
<script>
export default {
     
  name: 'XtxSkeleton',
  // 使用的时候需要动态设置 高度，宽度，背景颜色，是否闪下
  props: {
     
    bg: {
     
      type: String,
      default: '#efefef'
    },
    width: {
     
      type: String,
      default: '100px'
    },
    height: {
     
      type: String,
      default: '100px'
    },
    animated: {
     
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="less">
.xtx-skeleton {
     
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  .block {
     
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}
.shan {
     
  &::after {
     
    content: "";
    position: absolute;
    animation: shan 1.5s ease 0s infinite;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to left<