Empty 空状态

空状态组件,用于展示无数据时的占位

空状态组件,用于展示无数据时的占位,支持空数据、错误、网络异常等场景

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-empty class="demo-empty-default" />
  <re-empty class="demo-empty-desc" description="暂无数据" />

<!-- 自定义图片 -->
  <re-empty class="demo-empty-image" image="/static/logo.png" description="自定义图片" />

<!-- 不同描述 -->
  <re-empty class="demo-empty-no-data" description="暂无数据" />
  <re-empty class="demo-empty-no-message" description="暂无消息" />
  <re-empty type="network" class="demo-empty-no-network" description="网络异常" />
  <re-empty type="error" class="demo-empty-no-order" description="服务异常" />

<!-- 空描述 -->
  <re-empty class="demo-empty-no-desc" />

<!-- 自定义样式 -->
  <re-empty class="demo-empty-custom-style" description="自定义样式" customStyle="margin-top: 20px;" />

<!-- 默认图片 -->
  <re-empty class="demo-empty-default-image" description="使用默认图片" />

<!-- 长描述文字 -->
  <re-empty class="demo-empty-long-desc" description="这是一段很长的描述文字,用于测试空状态组件在长文本情况下的展示效果" />

<!-- 带操作按钮 -->
  <re-empty class="demo-empty-with-action" description="暂无数据">
  <re-button class="demo-empty-action-btn" theme="primary" content="刷新" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-empty />。

API

Empty Props

名称类型默认值描述必传
typestring"empty"空状态类型,empty/error/networkN
imagestring""自定义图片地址,优先级高于 type 默认图片N
descriptionstring""描述文字,为空时使用 type 对应的默认描述N
customStylestring""自定义样式N

Empty Events

名称参数描述
click-点击时触发

Empty Slots

名称描述
description-
action-