# Empty 缺省页

概述

Empty 缺省页，页面的信息内容为空或信息响应异常的状态。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiEmpty from "@/components/firstui/fui-empty/fui-empty.uvue"
export default {
	components:{
		fuiEmpty
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 src 属性设置图标图片地址，title 属性设置提示信息标题。

<fui-empty src="/static/images/component/empty/img_news_3x.png" title="暂无新消息"></fui-empty>

带操作按钮

通过 descr 属性设置提示信息描述，fui-button 按钮为插槽内容。

<fui-empty src="/static/images/component/empty/img_data_3x.png" title="暂无数据" descr="功能开发中，敬请期待！">
	<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" type="primary"
		margin="64rpx 0" :plain="true" color="#465CFF" borderColor="#465CFF"
		@onclick="goIndex"></fui-button>
</fui-empty>

1
2
3
4
5

export default {
	data() {
		return {

		}
	},
	methods: {
		goIndex() {
			// 使用该api 请查看 【快速上手】 内容
			// this.fui.href('/pages/tabbar/index/index', true)
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# Slots

插槽名称	说明
default	标签内自定义内容

# Props

属性名	类型	说明	默认值	平台差异说明
src	String	图片地址	-	-
width	Number	图片宽度，单位rpx	576	-
height	Number	图片高度，单位rpx	318	-
title	String	提示信息标题	-	-
color	String	提示信息标题字体颜色	#333333	-
size	Number	提示信息标题字体大小，单位rpx	32	-
descr	String	提示信息描述	-	-
descrColor	String	提示信息描述字体颜色	#B2B2B2	-
descrSize	Number	提示信息描述字体大小，单位rpx	24	-
isFixed	Boolean	缺省页内容是否固定在页面中间位置	false	-
marginTop	Number	缺省页内容margin-top值	0	-

# Events

事件名	类型	说明	回调参数
-	-	-	-

示例预览

# 示例代码地址

Empty 缺省页

← LoadMore 加载更多 Skeleton 骨架屏 →