Empty 空状态

页面或列表中数据为空时的图文引导占位组件，支持 6 种预设场景模式、3D 浮雕光晕矢量徽章、自定义插图与行动按钮。

---

代码示例

1. 基础预设场景 (Preset Modes)

通过 mode 快捷设定场景为 data (数据空)、search (搜索空)、cart (购物车空)、network (无网络)、permission (无权限)。

<template>
  <mu-empty mode="data" description="当前没有找到任何相关记录" />
  <mu-empty mode="search" description="未搜索到符合条件的搜索结果" />
  <mu-empty mode="cart" description="您的购物车空空如也" button-text="去抢购" @click-button="onGoShop" />
</template>

---

2. 自定义图片空状态 (Custom Image)

通过 image 传入外部图片或 GIF 动图地址。

<template>
  <mu-empty
    image="/static/empty.png"
    title="暂无数据"
    description="请稍后重新加载"
    button-text="刷新重试"
  />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
mode	预设场景模式	String	data | search | cart | message | network | permission	'data'
title	标题文案	String	-	自动匹配预设
description / subText	详细说明描述文案	String	-	''
icon	自定义矢量图标名称	String	-	自动匹配预设
iconSize	图标尺寸大小 (rpx)	Number | String	-	52
iconColor	自定义矢量图标色彩	String	-	自动匹配预设
image / src	自定义图片或动图 URL	String	-	''
imageSize	自定义图片尺寸 (px)	Number | String	-	160
buttonText	底部行动按钮文字	String	-	''
padding	上下内边距	String	-	'80rpx 0 60rpx'

---

事件说明 (Events)

事件名	说明	回调参数
click-button	点击底部行动按钮时触发	(event: MouseEvent)

---

插槽说明 (Slots)

插槽名	说明
default	自定义底部行动按钮区域插槽
image	自定义顶部插图/动图区域插槽