Skeleton 骨架屏

在内容加载前展示占位区块，降低用户等待焦虑。

基本用法

variant 支持 text、circle、rect、card 四种类型。

Text

Circle

Rect

Card

<ASkeleton variant="text" :rows="3" />
<ASkeleton variant="circle" width="48px" height="48px" />
<ASkeleton variant="rect" width="100%" height="120px" />
<ASkeleton variant="card" :rows="2" width="300px" />

禁用动画

设置 :animated="false" 关闭流光动画。

<ASkeleton variant="card" :animated="false" width="300px" />

API

Props

名称	类型	默认值	说明
animated	boolean	true	是否显示流光动画
variant	'text' | 'circle' | 'rect' | 'card'	'text'	骨架类型
width	string	—	宽度
height	string	—	高度（仅 circle / rect）
rows	number	3	文本行数（仅 text / card）

交互特性

• 默认显示 shimmer 扫光动画
• 动画使用 prefers-reduced-motion 响应式禁用