Skeleton 骨架屏

用于在内容加载过程中展示一组占位图形。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 loading 属性控制是否显示骨架屏，true 显示骨架屏，false 显示实际内容。

<zq-skeleton :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

const loading = ref(true)
setTimeout(() => { loading.value = false }, 2000)

显示标题

通过 title 属性显示标题占位。

<zq-skeleton title :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

自定义行数

通过 row 属性设置段落占位行数，默认为 3。

<zq-skeleton :row="5" :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

自定义行宽

通过 row-width 属性设置每行的宽度。可以传入字符串（统一宽度）或数组（逐行设置）。最后一行默认宽度为 60%。

<!-- 统一宽度 -->
<zq-skeleton row-width="80%" :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

<!-- 逐行设置 -->
<zq-skeleton :row-width="['100%', '80%', '60%']" :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

自定义标题宽度

通过 title-width 属性设置标题占位的宽度。

<zq-skeleton title title-width="60%" :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

显示头像

通过 avatar 属性显示头像占位。

<zq-skeleton avatar title :row="3" :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

头像形状

通过 avatar-shape 属性设置头像形状，支持 round（圆形）和 square（方形）。

<zq-skeleton avatar avatar-shape="square" :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

头像大小

通过 avatar-size 属性设置头像大小，单位 rpx。

<zq-skeleton avatar :avatar-size="96" :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

关闭动画

通过 :animate="false" 关闭骨架屏的脉冲动画。

<zq-skeleton :animate="false" :loading="loading">
  <text>实际内容</text>
</zq-skeleton>

API

Props

参数	说明	类型	默认值
loading	是否显示骨架屏	boolean	true
row	段落占位行数	number	3
title	是否显示标题占位	boolean	false
title-width	标题占位宽度	string	'40%'
avatar	是否显示头像占位	boolean	false
avatar-size	头像占位大小，单位 rpx	number	64
avatar-shape	头像占位形状	'round' | 'square'	'round'
animate	是否开启动画	boolean	true
row-width	段落占位宽度	string | string[]	'100%'

Slots

名称	说明
default	loading 为 false 时显示的实际内容

注意事项

• 当 row-width 为字符串时，最后一行宽度自动设为 60%，其余行使用指定宽度。
• 当 row-width 为数组时，每行使用对应索引的宽度，未指定的行默认 100%。

主题定制

变量名	说明
--color-bg-input	占位块背景色