Skeleton 骨架屏

内容加载时的占位图形。

代码演示

Real content loaded successfully! 🎉

Show Content

骨架屏

支持头像、标题、段落，点击按钮切换加载状态

<m-skeleton row="3" title avatar />
<m-skeleton row="2" avatar avatar-shape="square" row-width="100%, 60%" />

<!-- 切换加载状态 -->
<m-skeleton :loading="loading" row="2" title>
  <div>Real content loaded!</div>
</m-skeleton>
<m-button @click="loading = !loading">Toggle</m-button>

API

属性

属性	说明	类型	默认值
row	段落行数	number	3
row-width	每行宽度（逗号分隔）	string	-
title	是否显示标题占位	boolean	false
avatar	是否显示头像占位	boolean	false
avatar-shape	头像形状	round | square	round
loading	是否显示骨架屏	boolean	true
animate	是否开启动画	boolean	false