Empty 空状态

空状态时的占位提示。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

<zq-empty />

自定义描述

通过 description 属性设置描述文字。

<zq-empty description="暂无数据" />

自定义图标

通过 icon 属性设置图标名称，通过 icon-size 属性设置图标大小。

<zq-empty icon="search" :icon-size="64" description="暂无搜索结果" />

自定义图片

通过 image 插槽自定义图片内容。

<zq-empty description="暂无数据">
  <template #image>
    <image src="/static/empty.png" style="width: 200rpx; height: 200rpx;" />
  </template>
</zq-empty>

底部内容

通过默认插槽在底部插入内容。

<zq-empty description="暂无数据">
  <zq-button type="primary" size="small" text="刷新" />
</zq-empty>

API

Props

参数	说明	类型	默认值
icon	图标名称	string	'inbox'
icon-size	图标大小	number	48
description	描述文字	string	''（默认使用 i18n component.empty）

Slots

名称	说明
default	底部内容
image	自定义图片
description	自定义描述文字

主题定制

变量名	说明
--color-text-disabled	图标颜色
--color-text-placeholder	描述文字颜色