Skip to content

Empty 空狀態 ​

空資料時的佔位提示,自帶水墨插畫。

基礎用法 ​

vue
<template>
  <lh-empty />
</template>

description 未傳時取語言包的 empty.description(中文「暂无数据」),切換 ConfigProvider 語言自動跟隨。

自訂文案 ​

vue
<template>
  <lh-empty description="墨痕未干,暂无可览之物" />
</template>

自訂圖片 ​

vue
<template>
  <lh-empty image="https://placeholder.invalid/empty.png" description="空空如也" />
</template>

插槽自繪 ​

預設插槽可完全替代預設插畫(傳入 image 時預設插畫也不渲染)。

vue
<template>
  <lh-empty description="暂无收藏">
    <view class="my-illustration">🎨</view>
  </lh-empty>
</template>

Props ​

屬性說明類型預設值
description空狀態描述文案(未傳時取語言包 empty.description)string—
image自訂圖片 URL(替代預設插畫)string—
customClass自訂類別名string—
sx快速版面配置屬性LhSxProps—

Slots ​

插槽說明
default自繪插畫(傳入後替代預設插畫)

小程序端的預設插畫

H5 保留內聯 <svg> 插畫(主題著色完整保真);小程序不支援 svg,預設插畫改用 CSS 繪製簡化版,顏色取主題變數,明暗模式自動適配。