admin_h5/components/EmptyState

EmptyState 空状态组件

空状态组件用于展示空数据、网络异常、搜索无结果等场景的占位提示。

基本用法

<template>
  <!-- 基本空数据状态 -->
  <EmptyState type="noData" />

  <!-- 网络异常状态 -->
  <EmptyState type="noNetwork" :show-button="true" @button-click="handleRetry" />

  <!-- 搜索无结果 -->
  <EmptyState type="noSearch" />

  <!-- 自定义内容 -->
  <EmptyState type="custom" icon="heart" text="暂无收藏" sub-text="快去收藏你喜欢的项目吧" :show-button="true" button-text="去收藏" @button-click="goToCollect" />
</template>

<script setup>
import EmptyState from '@/components/EmptyState/EmptyState.vue';

const handleRetry = () => {
  console.log('重试');
};

const goToCollect = () => {
  console.log('去收藏');
};
</script>

Props

参数	类型	默认值	说明
type	String	'noData'	空状态类型：'noData' | 'noNetwork' | 'noSearch' | 'error' | 'custom'
icon	String	''	自定义图标名称，会覆盖默认图标
iconSize	String/Number	80	图标大小
text	String	''	主要描述文字，会覆盖默认文字
subText	String	''	副描述文字
height	String	'400rpx'	组件高度
showButton	Boolean	false	是否显示操作按钮
buttonText	String	'重试'	按钮文字
buttonColor	String	'#1F71B9'	按钮颜色
buttonPlain	Boolean	false	按钮是否为镂空样式

Events

事件名	说明	回调参数
buttonClick	按钮点击事件	-

预设类型

noData (默认)

• 图标：file-text
• 文字：暂无数据
• 场景：列表、表格等无数据时

noNetwork

• 图标：wifi-off
• 文字：网络连接失败
• 副文字：请检查网络设置后重试
• 场景：网络异常时

noSearch

• 图标：search
• 文字：暂无搜索结果
• 副文字：试试其他关键词吧
• 场景：搜索无结果时

error

• 图标：error-circle
• 文字：加载失败
• 副文字：请稍后重试
• 场景：接口请求失败时

custom

• 图标：info-circle
• 文字：暂无内容
• 场景：自定义场景

样式说明

• 组件默认高度为 400rpx，可通过 height 属性调整
• 图标颜色根据类型自动设置，无数据和网络异常为灰色，错误为红色
• 文字颜色为 #969799，副文字颜色为 #C8C9CC
• 按钮遵循项目规范，默认使用主题色 #1F71B9

使用建议

1. 在列表组件中，当数据为空时显示 type="noData"
2. 在网络请求失败时显示 type="noNetwork" 并提供重试按钮
3. 在搜索结果为空时显示 type="noSearch"
4. 根据具体业务场景，可使用 type="custom" 自定义内容