Skeleton 骨架屏

数据加载完成前的占位动效组件，提供 paragraph（段落）、card（图文卡片）与 avatar（包含头像）等预设形态，配备微光扫光扫过动画，有效提升应用加载体验。

---

代码示例

1. 基础段落骨架屏 (Paragraph Mode)

<template>
  <mu-skeleton :loading="isLoading" title :rows="3">
    <!-- 数据加载完成后的实际内容 -->
    <view class="content">
      <text>实际渲染的数据标题与正文...</text>
    </view>
  </mu-skeleton>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)

setTimeout(() => {
  isLoading.value = false
}, 1500)
</script>

---

2. 带头像列表骨架屏 (Avatar List Mode)

设置 avatar 属性，并可通过 avatar-size（sm | md | lg）与 avatar-round 调节头像占位外观。

<template>
  <mu-skeleton
    :loading="true"
    avatar
    avatar-size="lg"
    avatar-round
    title
    :rows="2"
  />
</template>

---

3. 商品/图文卡片骨架屏 (Card Mode)

设置 type="card" 即可渲染商品/瀑布流卡片占位形态。

<template>
  <view class="card-grid">
    <mu-skeleton :loading="true" type="card" />
    <mu-skeleton :loading="true" type="card" />
  </view>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
loading	是否显示骨架屏（为 false 时自动展示默认 slot 插槽内容）	Boolean	true | false	true
animate	是否开启动画微光扫光效果	Boolean	true | false	true
type	骨架屏形态预设	String	paragraph (段落) | card (卡片)	'paragraph'
avatar	是否展示头像骨架	Boolean	true | false	false
avatarSize	头像尺寸	String	sm | md | lg	'md'
avatarRound	头像是否为圆形	Boolean	true | false	true
title	是否展示标题骨架行	Boolean	true | false	true
titleWidth	标题骨架行宽度	String	-	'40%'
rows	内容骨架行数	Number | Array	-	3
rowsWidth	各骨架行自定义宽度数组	Array	-	[]

---

插槽说明 (Slots)

插槽名	说明
default	loading 为 false 时展示的真实页面内容插槽