Empty 空状态

介绍

空状态组件，提供空状态时的占位提示。

导入

import Empty from '@/components/feedback/Empty.vue'

用法

基础用法

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<template>
  <Empty image="error" description="非常抱歉，出错了" />
  <Empty image="network" description="网络不给力，稍后再试" />
  <Empty image="search" description="暂无数据，换一个搜索词试试吧" />
</template>

自定义大小

通过 imageSize 属性设置图片的大小。

<template>
  <Empty image="error" description="描述文字" :imageSize="140" />
</template>

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<template>
  <Empty image="https://imengyu.top/assets/images/test/2.jpg" description="描述文字" />
</template>

自定义内容

支持在组件下方添加自定义内容。

<template>
  <Empty image="search" description="暂无数据，换一个搜索词试试吧">
    <Height :size="20" />
    <Button type="primary" shape="round">刷新</Button>
  </Empty>
</template>

API 参考

Empty

空状态组件。

Props

名称	说明	类型	必填	默认值
description	图片下方的描述文字	string	-	''
image	图片类型，可选值为 default error network search，支持传入图片 URL	string	-	'default'
imageSize	图片大小	number	-	200
innerStyle	自定义样式	ViewStyle	-	-

Slots

名称	说明
default	自定义内容，会显示在组件的最下方

主题变量

名称	类型	默认值	说明
EmptyImageSize	number	200	图片默认大小
EmptyImage	string	'default'	默认图片类型
EmptyPadding	number	20	组件内边距
EmptyDescriptionPaddingVertical	number	8	描述文字的垂直内边距
EmptyDescriptionFontSize	number	26	描述文字的字体大小
EmptyDescriptionColor	string	text.second	描述文字的颜色