效果图:

  1.              ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1626611372785-9cddd245-ecdb-48a7-b2c3-d90ac616cf89.png#clientId=u73e0a9c9-3ea1-4&from=paste&height=116&id=u62e903dc&margin=%5Bobject%20Object%5D&name=image.png&originHeight=231&originWidth=208&originalType=binary&ratio=1&size=4669&status=done&style=none&taskId=u7eb9b28e-682f-4f59-b17b-389a08bf6f1&width=104)

为什么使用骨架屏:

  1. 在数据加载的过程中,一种等待效果,就是为了好看

原理:

  1. 有一小块, 有一个动画
  2. 多个小块组合在一起,模拟骨架
  3. 它可以定制: width , height , bg

一: 动态定制

封装插件

  1.        封装组件:  src/components/xtx-skeleton.vue
  3.  1. 先想好测试用例（也就是说你希望别人怎么用这个组件的）就要思考，传入什么值进去。
  1. <XtxSkeleton style="margin-right:10px" width="200px" height="50px" bg="red"/>
  2. <XtxSkeleton style="margin-right:50px"  width="100px" height="100px" bg="blue"/>
  3. <XtxSkeleton width="50px" height="18px" bg="blue"/>
  1. 2. 在组件内部，定义对应props去接收，实现具体效果
  1. <template>
  2.   <div class="xtx-skeleton shan" :style="{width:width,height:height}">
  3.     <!-- 1 盒子-->
  4.     <div class="block" :style="{backgroundColor:bg}"></div>
  5.     <!-- 2 闪效果 xtx-skeleton 伪元素 --->
  6.   </div>
  7. </template>
  8. <script>
  9. export default {
  10.   name: 'XtxSkeleton',
  11.   props: {
  12.     width: { type: String, default: '100px' },
  13.     height: { type: String, default: '100px' },
  14.     bg: { type: String, default: '#ccc' }
  15.   }
  16. }
  17. </script>
  18. <style scoped lang="less">
  19. .xtx-skeleton {
  20.   display: inline-block;
  21.   position: relative;
  22.   overflow: hidden;
  23.   vertical-align: middle;
  24.   .block {
  25.     width: 100%;
  26.     height: 100%;
  27.     border-radius: 2px;
  28.   }
  29. }
  30. .shan {
  31.   &::after {
  32.     content: "";
  33.     position: absolute;
  34.     animation: shan 1.5s ease 0s infinite;
  35.     top: 0;
  36.     width: 50%;
  37.     height: 100%;
  38.     background: linear-gradient(
  39.       to left,
  40.       rgba(255, 255, 255, 0) 0,
  41.       rgba(255, 255, 255, 0.3) 50%,
  42.       rgba(255, 255, 255, 0) 100%
  43.     );
  44.     transform: skewX(-45deg);
  45.   }
  46. }
  47. @keyframes shan {
  48.   0% {
  49.     left: -100%;
  50.   }
  51.   100% {
  52.     left: 120%;
  53.   }
  54. }
  55. </style>

二: vue3中插件格式定义全局组件

1. 封装插件 :

  1.  在src/componets/index.js        vue3版本
  1. import XtxSkeleton from './xtx-skeleton.vue'
  2. const myPlugin = {
  3.   install (app) {
  4.     // 在app上进行扩展，app提供 component directive 函数
  5.     app.component(XtxSkeleton.name, XtxSkeleton)
  6.   }
  7. }
  8. export default myPlugin

注意:
以插件的格式全局注册组件的时候:
image.png image.png
区别就是: vue2中install的参数是Vue构造器，vue3中install中的参数是vue实例。

2. 使用插件:

在 src/main.js

插件的使用，在main.js使用app.use(插件)

  1. import myPlugin from './components/index'
  3. createApp(App).use(myPlugin)

最后就是测试使用