空状态 Empty

用于列表、搜索、收藏等场景下无数据时的占位提示，帮助用户理解当前状态。

基础用法

默认展示一个空状态图标和「暂无数据」提示文本。

暂无数据

<template>
  <bp-empty />
</template>

自定义文本

通过 content 属性自定义提示文本内容。

暂无数据

暂无搜索结果

<template>
  <bp-space type="vertical" :size="24">
    <bp-empty />
    <bp-empty content="暂无搜索结果" />
  </bp-space>
</template>

自定义图片

使用 image 插槽自定义空状态的图标或图片，适用于不同业务场景。

暂无数据

暂无收藏

<template>
  <bp-space :size="40">
    <bp-empty>
      <template #image>
        <IconSearchLine size="36" style="color: #c9cdd4" />
      </template>
    </bp-empty>
    <bp-empty content="暂无收藏">
      <template #image>
        <IconHeartLine size="36" style="color: #c9cdd4" />
      </template>
    </bp-empty>
  </bp-space>
</template>

<script setup lang="ts">
import { IconSearchLine, IconHeartLine } from "birdpaper-icon";
</script>

Empty 属性

content

空状态提示文本

String

暂无数据

-

Empty 插槽

image

自定义空状态图标或图片

-

-