GridItem 宫格项

宫格布局 <mu-grid> 中的单个子项容器控件，支持自定义矢量图标、自定义图片、主副标题、徽章角标与红点形态。

---

代码示例

1. 基础用法

<template>
  <mu-grid :column="3">
    <mu-grid-item icon="user" text="个人中心" sub-text="查看信息" badge="HOT" />
    <mu-grid-item icon="bell" text="消息通知" dot />
    <mu-grid-item icon="settings" text="设置" />
  </mu-grid>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
text	标题文案	String	-	''
subText	副标题文案	String	-	''
icon	矢量图标名称或图片 URL 链接	String	-	''
iconSize	图标尺寸大小 (rpx)	Number | String	-	24
iconColor	图标颜色	String	-	''
textColor	标题文字颜色	String	-	''
badge	角标数字或文本	Number | String	-	0
dot	是否展示为小红点	Boolean	true | false	false
background	宫格项自定义背景色	String	-	''
index	当前宫格项在列表中的索引编号	Number	-	0

---

事件说明 (Events)

事件名	说明	回调参数
click	点击当前宫格项时触发	(event: MouseEvent)

---

插槽说明 (Slots)

插槽名	说明
default	自定义宫格项主体内容区域
icon	自定义图标/图片区域插槽
text	自定义标题文案区域插槽