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 绘制简化版,颜色取主题变量,明暗模式自动适配。