Empty 空状态

BzEmpty 用于数据为空或无内容时的占位展示。内置默认空状态插画，支持自定义图片、描述文本和底部操作区域。

基础用法

最简单的空状态展示，使用默认插画和文案。

基础用法

Vue Demo

暂无数据

可直接复制并在项目中使用

<template>
  <BzEmpty />
</template>

自定义描述

通过 description 属性修改描述文本。

自定义描述

Vue Demo

没有找到相关结果

可直接复制并在项目中使用

<template>
  <BzEmpty description="没有找到相关结果" />
</template>

底部操作区

通过默认插槽在底部添加操作按钮或内容。

底部操作

Vue Demo

暂无数据

可直接复制并在项目中使用

<template>
  <BzEmpty>
    <BzButton type="primary" label="重新加载" />
  </BzEmpty>
</template>

自定义图片

通过 image 传入自定义图片地址，配合 imageSize 控制宽度。

自定义图片

Vue Demo

没有收藏内容

快去逛逛吧

可直接复制并在项目中使用

<template>
  <BzEmpty
    image="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    :image-size="200"
    description="没有收藏内容"
  >
    快去逛逛吧
  </BzEmpty>
</template>

通过插槽自定义图片与描述

使用 image 和 description 具名插槽完全接管图片区和描述区。

插槽自定义图片与描述

Vue Demo

📡

网络连接异常，请稍后重试

可直接复制并在项目中使用

<template>
  <BzEmpty description="网络请求失败">
    <template #image>
      <div style="font-size: 48px; opacity: 0.4;">📡</div>
    </template>
    <template #description>
      <span style="color: #e6a23c; font-weight: 500;">网络连接异常，请稍后重试</span>
    </template>
    <BzButton type="primary" label="重新连接" />
  </BzEmpty>
</template>

富文本描述

description 插槽支持富文本内容。

富文本描述

Vue Demo

共 0 条待办事项

可直接复制并在项目中使用

<template>
  <BzEmpty>
    <template #description>
      <span>共 <strong style="color: #409eff;">0</strong> 条待办事项</span>
    </template>
  </BzEmpty>
</template>

Props

参数	说明	类型	默认值
image	自定义图片地址，不传则使用默认插画	string	''
imageSize	图片宽度 (px)，高度按 0.5 等比缩放	number	160
description	描述文本	string	'暂无数据'

Slots

插槽名	说明
default	底部操作区域
image	自定义图片区域
description	自定义描述文本，支持富文本