骨架屏组件.vue

1）定义基础骨架组件结构

components/Skeleton/index.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<template>   <div     class="xtx-skeleton shan"     :style="{ width: '60px', height: '30px' }"   >     <!-- 1 盒子-->     <div class="block" :style="{ backgroundColor: '#efefef'}"></div>     <!-- 2 闪效果 xtx-skeleton 伪元素 --->   </div> </template> <script> export default {   name: 'XtxSkeleton' } </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,       rgba(255, 255, 255, 0) 0,       rgba(255, 255, 255, 0.3) 50%,       rgba(255, 255, 255, 0) 100%     );     transform: skewX(-45deg);   } } @keyframes shan {   0% {     left: -100%;   }   100% {     left: 120%;   } } </style>

　　

2）props设计

我们把骨架的宽度（width）、高度（height）、背景色（backgroundColor）定义为props，由用户自定义传入定制效果

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<template>   <div     class="xtx-skeleton shan" +    :style="{ width: width + 'px', height: height + 'px' }"   >     <!-- 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: '100'     }, +    height: {       type: String,       default: '100'     } +  } } </script>

　　

3）测试组件props

playground/index.vue

?

1 2	<!-- 骨架组件测试 --> <XtxSkeleton width="100" height="30" bg="blue"/>