vue3骨架屏效果

首屏加载时间过长的影响，采用“骨架屏”的方式去提升用户体验。

骨架屏封装全局组件 install注入

1. 骨架屏组件 src/components/library/skeleton.vue

<script setup lang="ts" name="skeleton">
  defineProps({
    bg: { //背景颜色
      type: String,
      default: '#efefef',
    },
    width: { //宽度
      type: Number,
    },
    height: {  //高度
      type: Number,
    },
    animated: { // 动画
      type: Boolean,
      default: false,
    },
    fade: { // 淡入淡出
      type: Boolean,
      default: false,
    },
  })
</script>

<template>
  <div
    class="skeleton"
    :style="{ width: width + 'px', height: height + 'px' }"
    :class="{ shan: animated, fade }"
  >
    <!-- 1 盒子-->
    <div class="block" :style="{ backgroundColor: bg }"></div>
    <!-- 2 闪效果 xtx-skeleton 伪元素 --->
  </div>
</template>

<style lang="less" scoped>
.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%;
  }
}

.fade {
  animation: fade 1s linear infinite alternate;
}
@keyframes fade {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
</style>

2. 全局注册组件

import skeleton from './skeleton.vue'
import { App } from 'vue'

export default {
  install(app: App) {
    app.component(skeleton.name, skeleton)
  }
}

3. main.js 引入并use

import library from '@/components/library'
app.use(library)

4. 使用
   
   如果接口比较快，此时骨架屏效果就不是很明显 一闪而过，我们可以利用vue的内置组件Transition加过渡效果

<script setup lang="ts">
import { ref, Ref } from 'vue'
let list: Ref<number[]> = ref([])
setTimeout(() => {
  list.value = [1, 2, 3, 4, 5]
}, 100)
</script>

<template>
  <div style="background-color: black">
    <!-- 不加过渡的效果 -->
    <!-- <ul v-if="list.length > 0">
      <li v-for="item in list">{{ item }}</li>
    </ul>

    <gl-skeleton
      v-else
      bg="rgba(255,255,255,0.2)"
      animated
      :width="1300"
      :height="100"
    ></gl-skeleton> -->
    <!-- 加过渡的效果 -->
    <Transition name="fade">
      <ul v-if="list.length > 0">
        <li v-for="item in list">{{ item }}</li>
      </ul>

      <gl-skeleton
        v-else
        bg="rgba(255,255,255,0.2)"
        animated
        :width="1300"
        :height="100"
      ></gl-skeleton>
    </Transition>
  </div>
</template>

<style lang="less" scoped>
li {
  height: 20px;
  line-height: 20px;
  text-align: center;
}
// 离开淡出动画
.fade {
  &-leave {
    &-active {
      position: absolute;
      width: 100%;
      transition: opacity 0.5s 0.2s;
      z-index: 1;
    }
    &-to {
      opacity: 0;
    }
  }
}
</style>