[JavaScript知识库]vue3骨架图制作

1. 确定需求

 <Skeleton >
     <Row :circle="true" :width="40" :height="40">
       <img src="" alt="">
     </Row>
     <Row></Row>
 </Skeleton>

2. Skeleton组件制作

<template>
  <div>
    <slot/>
  </div>
</template>

3. Row组件制作

<template>
  <div class="gulu-skeleton-wrap">
    <div class="gulu-skeleton" :class="{circle:circle}" :style="{width: width+'px',height:height+'px'}">
      <slot/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, toRefs} from "vue";

export default defineComponent({
  name: "row",
  props: {
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 16
    },
    circle: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const {width, height, circle} = toRefs(props)
    return {width, height, circle}
  }
})
</script>

<style lang="scss" scoped>
.gulu-skeleton-wrap {
  margin-top: 16px;

  > .gulu-skeleton {
    background: linear-gradient(66deg, rgba(232, 232, 232, 1) 0%, rgba(242, 242, 242, 1) 35%, rgba(232, 232, 232, 1) 83%, rgba(232, 232, 232, 1) 100%);
    background-size: 800px 45px;
    animation: shine 1s infinite;
    &.circle {
      clip-path: circle(50%)   
    }
  }
}
@keyframes shine {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}
</style>

效果如下：