FxEmpty 空状态

用于空数据、无搜索结果、列表为空等场景的占位提示。不依赖任何 UI 框架，样式走 @fx/styles 的 --color-* token。

FxEmpty 属于 @fx/components（UI 框架无关的通用组件）。

基础用法

不传任何 prop 时，从内置插画池随机选一张作为默认图片，描述取默认文案「暂无数据」。

<template>
  <FxEmpty />
</template>

自定义描述

description 控制下方文字。

<template>
  <div class="col">
    <FxEmpty description="暂无搜索结果" />
    <FxEmpty description="换个文案试试" />
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style>

自定义图片地址

image 传入图片 URL，覆盖默认插画。

<template>
  <FxEmpty
    image="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'><rect x='8' y='8' width='144' height='104' rx='8' fill='%23f1f5f9' stroke='%23cbd5e1' stroke-dasharray='6 6'/><text x='80' y='66' font-size='14' fill='%2394a3b8' text-anchor='middle'>自定义图片</text></svg>"
    description="通过 image 传入图片 URL"
  />
</template>

图片尺寸

image-size 控制图片区域宽度（px），对图片地址、图标、默认插画统一生效。

<template>
  <div class="col">
    <FxEmpty :image-size="80" description="image-size = 80" />
    <FxEmpty :image-size="200" description="image-size = 200" />
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style>

自定义图标

icon 接受图标名字符串（经 FxIcon 渲染）或 Vue 组件（经 <component :is> 渲染），优先级低于 image、高于默认插画。

<template>
  <div class="col">
    <FxEmpty icon="ep:folder-opened" description="字符串图标名（FxIcon 渲染）" />
    <FxEmpty icon="svg:common-empty" description="内置 svg 图标" />
    <FxEmpty :icon="CustomIcon" description="组件图标（<component :is> 渲染）" />
  </div>
</template>

<script setup lang="ts">
import { h } from "vue"
import { FxIcon } from "@fx-core/icon"

/** icon 也接受任意 Vue 组件：这里用渲染函数包一层 FxIcon */
const CustomIcon = () => h(FxIcon, { name: "ep:box", size: 120 })
</script>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style>

插槽自定义

• image 插槽：完整自定义图片区域，优先级最高
• description 插槽：覆盖描述文字
• default 插槽：底部操作区（常放刷新按钮）

<template>
  <div class="col">
    <!-- default 插槽：底部操作区 -->
    <FxEmpty description="列表为空，可点击刷新重试">
      <FxBtn type="primary" @click="refresh">刷新</FxBtn>
    </FxEmpty>

    <!-- image + description 插槽：完整自定义 -->
    <FxEmpty>
      <template #image>
        <FxIcon name="ep:warning-filled" :size="80" color="var(--fx-color-warning)" />
      </template>
      <template #description>
        <span class="custom-desc">自定义图片 + 描述</span>
      </template>
    </FxEmpty>
  </div>
</template>

<script setup lang="ts">
import { FxBtn } from "@fx/components"
import { fxMsg } from "@fx/components"

function refresh() {
  fxMsg.success("已刷新")
}
</script>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.custom-desc {
  color: var(--fx-color-warning);
  font-weight: 500;
}
</style>

渲染优先级

图片区域按以下顺序取值：

1. image 插槽（完整自定义）
2. image prop（图片 URL）
3. icon prop（图标名 / 组件）
4. 默认随机插画（内置 svg 池）

API

Attributes

属性	说明	类型	默认值
image	图片 URL，优先级高于 icon 与默认插画	string	''
image-size	图片 / 图标宽度（px）	number	—
description	描述文字，留空时取默认文案「暂无数据」	string	''
icon	自定义图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx），亦可传组件	string / Component	—

Slots

插槽名	说明
image	自定义图片区域（优先级最高，覆盖 image / icon prop 与默认插画）
description	自定义描述内容（覆盖 description prop）
default	底部内容，常用于放置操作按钮