Empty 空状态

数据为空时的占位提示。容器为 role="status"，空态出现时屏幕阅读器自动播报。

基础用法

基础用法

暂无数据

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

<template>
  <LhEmpty />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty />
</template>

自定义描述

自定义描述

搜索结果为空

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

<template>
  <LhEmpty description="搜索结果为空" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="搜索结果为空" />
</template>

自定义图片

自定义图片

暂无订单

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

<template>
  <LhEmpty image="/logo.svg" description="暂无订单" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty image="/logo.svg" description="暂无订单" />
</template>

带操作

带操作

还没有收藏任何内容

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

<template>
  <LhEmpty description="还没有收藏任何内容">
    <template #actions>
      <LhButton type="primary" size="small">去逛逛</LhButton>
      <LhButton size="small">刷新</LhButton>
    </template>
  </LhEmpty>
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="还没有收藏任何内容">
    <template #actions>
      <LhButton type="primary" size="small">去逛逛</LhButton>
      <LhButton size="small">刷新</LhButton>
    </template>
  </LhEmpty>
</template>

Empty API

Props

属性	说明	类型	默认值
description	描述文案（未传时取语言包 empty.description）	string	—
image	自定义图片 URL（替代默认内联插画）	string	—
sx	sx 快速布局属性	LhSxProps	—

Slots

插槽	说明	默认内容
default	自定义视觉区（替代插画）	默认水墨插画
description	自定义描述	语言包 empty.description
actions	动作区	—

无障碍

• 容器 role="status"：空态出现时自动播报
• 装饰性图片 alt="" 对屏读隐藏，语义由描述文案承担

类型定义

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

LhEmptyProps

export interface LhEmptyProps {
  /** 空状态描述文案（未传时取语言包 empty.description） */
  description?: string
  /** 自定义图片 URL（替代默认内联插画） */
  image?: string
  /** sx 快速布局属性 */
  sx?: LhSxProps
}