m-empty 空状态

简述

空状态时的占位提示，用于列表为空、没有数据等场景。

注意

请以 uni_modules/m-unix 与本文为准；各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力（相册、定位、剪贴板、手机号等）需在 manifest 与后台完成配置。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/empty/empty
线上 H5（hash）	打开演示

基本使用

<template>
	<m-empty description="暂无数据"></m-empty>
</template>

Props

参数	说明	类型	默认值
image	自定义图片 URL	string	''
description	文字说明	string	暂无数据
text	与 description 相同含义，非空时优先显示	string	''
icon	m-icon 的 name；未传且未使用 image 时，默认使用内置图标 file-common-filling（不依赖 /static 插图）	string	''
paddingTop	区域距离顶部距离（数字默认 rpx）	number | string	200

插槽

名称	说明
icon	自定义图标；不写则用默认 m-icon（file-common-filling）
footer	底部内容，一般放按钮
default	底部内容，与 footer 可同时使用

底部使用 m-button 时，请用 btnSize（如 small）控制按钮规格；m-button 的 size 表示字号 rpx，写成 size="small" 不会得到小按钮，且默认 width 为 100% 会拉满一行。

示例

基础用法

<m-empty description="暂无合同数据"></m-empty>

自定义图片

<m-empty
	description="暂无数据"
	image="https://example.com/empty.png"
></m-empty>

底部按钮

<m-empty description="暂无数据">
	<template #footer>
		<m-button type="primary" btnSize="small">去添加</m-button>
	</template>
</m-empty>