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
}