Skeleton 骨架屏

在内容加载完成前提供占位图。占位块 aria-hidden 对屏读隐藏，容器以 aria-busy 与 aria-live 通知加载状态变化；流光动画尊重 prefers-reduced-motion。

基础用法

基础用法

<script setup lang="ts">
import { ref } from 'vue'

const skeletonLoading = ref(true)
</script>

<template>
  <!-- 基础用法 -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>内容加载完成：众鸟高飞尽，孤云独去闲。</p>
  </LhSkeleton>
  <!-- 切换加载态 -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? '显示内容' : '显示骨架' }}
  </LhButton>
</template>

<script>
export default {
  data() {
    return { skeletonLoading: true }
  },
}
</script>

<template>
  <!-- 基础用法 -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>内容加载完成：众鸟高飞尽，孤云独去闲。</p>
  </LhSkeleton>
  <!-- 切换加载态 -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? '显示内容' : '显示骨架' }}
  </LhButton>
</template>

头像组合

头像组合

<script setup lang="ts">
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

关闭动画

静态骨架

<script setup lang="ts">
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

SkeletonItem 独立占位块

SkeletonItem

<script setup lang="ts">
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

Skeleton API

Props

属性	说明	类型	默认值
loading	是否加载态（false 时渲染 default 插槽）	boolean	true
rows	文本行数	number	3
avatar	是否包含圆形头像占位	boolean	false
animated	是否开启动画	boolean	true
sx	sx 快速布局属性	LhSxProps	—

Slots

插槽	说明
default	loading 为 false 时渲染的真实内容

SkeletonItem API

Props

属性	说明	类型	默认值
variant	占位块形状	'text' | 'rect' | 'circle'	'text'
animated	是否开启动画	boolean	true
sx	sx 快速布局属性	LhSxProps	—

主题变量

变量	说明	默认值
--lh-skeleton-bg	占位块底色	墨色（text-regular）10% 透明混合
--lh-skeleton-highlight	流光高光色	底色向白色提亮 45%
--lh-skeleton-radius	基础圆角	--lh-border-radius-small

无障碍

• 占位块 aria-hidden="true"，不进屏读
• 容器 aria-busy="true" + aria-live="polite"，加载完成切内容后自动播报
• prefers-reduced-motion: reduce 时流光动画自动关闭

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/skeleton/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhSkeletonProps

export interface LhSkeletonProps {
  /** 是否处于加载态（false 时渲染 default 插槽的真实内容） */
  loading?: boolean
  /** 文本行数 */
  rows?: number
  /** 是否包含圆形头像占位 */
  avatar?: boolean
  /** 是否开启动画 */
  animated?: boolean
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhSkeletonItemProps

export interface LhSkeletonItemProps {
  /** 占位块形状 */
  variant?: LhSkeletonVariant
  /** 是否开启动画 */
  animated?: boolean
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhSkeletonVariant _{（来自 @lh-ui/share/core/skeleton）}

/** 骨架占位块形状 */
export type LhSkeletonVariant = 'text' | 'rect' | 'circle'