SkeletonScreen 骨架屏

数据加载过程中的骨架占位组件。支持 7 种类型的骨架动画，用于在页面数据未就绪时提供视觉反馈，减少用户等待焦虑。

• 基础用法
• Props
• 骨架屏类型
• 与 Loading 的区别
• 注意事项

基础用法

<template>
  <!-- 加载中显示骨架屏 -->
  <SkeletonScreen v-if="loading" type="table" :rows="5" :columns="4" />
  <!-- 加载完成显示真实内容 -->
  <AiCrudPage v-else api="/api/user" :columns="columns" />
</template>

<script setup>
import { ref } from 'vue'
import SkeletonScreen from '@/components/common/SkeletonScreen.vue'

const loading = ref(true)
</script>

Props

属性	类型	默认值	说明
type	String	'simple'	骨架屏类型，见下表
rows	Number	5	列表/表格类型的行数
columns	Number	5	表格类型的列数
fields	Number	4	表单类型的字段数
showAvatar	Boolean	false	列表类型是否显示头像占位
showDescription	Boolean	true	列表类型是否显示描述行
showHeader	Boolean	true	卡片类型是否显示头部
showImage	Boolean	false	卡片类型是否显示图片占位

骨架屏类型

type	效果	适用场景
simple	单行占位块	文本加载
list	头像 + 标题 + 描述列表	消息列表、通知列表
card	图片 + 标题 + 描述卡片	商品列表、项目卡片
table	表头 + 行骨架表格	CRUD 页面表格加载（常用）
form	标签 + 输入框表单	表单页加载
chart	柱状图 + 饼图占位	图表页加载
dashboard	卡片 + 图表仪表盘	仪表盘整体加载

与 Loading 的区别

组件	用途	视觉效果
SkeletonScreen	页面初始加载时替代真实内容	灰色骨架条带 shimmer 动画
Loading	操作进行中遮罩	居中旋转加载图标 + 文字

注意事项

• 所有骨架元素均带 shimmer 动画，支持暗色模式自动适配
• 实际使用时通过 v-if / v-else 在骨架屏和真实内容之间切换
• type="table" 配合 rows 和 columns 效果最接近真实表格