Empty 空状态

空状态时的展示占位图。

基本用法

i-empty 可直接包裹展位图提示文字。

暂无数据

<template>
  <i-empty />
</template>

显示代码复制代码复制代码

不同尺寸

提供 small、medium（默认）、large 三种不同尺寸的空状态展位图。

暂无数据

暂无数据

暂无数据

<template>
  <i-empty size="small" />
  <i-empty size="medium" />
  <i-empty size="large" />
</template>

显示代码复制代码复制代码

不同类型

提供 default（默认）、shoppingTrolley、favorite、gold 四种不同类型的空状态展位图。

<template>
  <i-empty type="default">暂无数据</i-empty>
  <i-empty type="shoppingTrolley">购物车空空如也</i-empty>
  <i-empty type="favorite">收藏夹为空</i-empty>
  <i-empty type="gold">暂无金币</i-empty>
</template>

显示代码复制代码复制代码

自定义展位图

提供 image 属性自定义展位图。

<template>
  <i-empty image="https://picsum.photos/180/120">自定义展位图</i-empty>
</template>

显示代码复制代码复制代码

Empty Attributes

属性	说明	类型	默认值
image	自定义展位图	string	--
size	空状态尺寸	"small"〡"medium"〡"large"	medium
type	空状态显示类型	"default"〡"shoppingTrolley"〡"favorite"〡"gold"	default