vue3骨架屏效果

优秀的土豆丝

已于 2022-06-09 11:54:54 修改

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 vue 文章标签： css3 vue.js css

于 2022-06-06 17:00:20 首次发布

本文链接：https://blog.csdn.net/qq_36773704/article/details/125150160

本文介绍了如何通过骨架屏优化首屏加载时间，以改善用户体验。利用骨架屏组件（skeleton.vue）进行全局注册，并在main.js中引入。在数据接口响应慢时，骨架屏显示以减少用户等待感知。通过Vue的Transition组件添加过渡效果，使得页面内容在加载时有平滑的显示变化，提高了应用的交互质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

骨架屏组件 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>
    <