Grid 宫格布局

用于等宽多列图标菜单、数据平铺矩阵、Bento 悬浮卡片组的网格布局控件，支持分栏数量控制、分割线显示、徽章角标与点击缩放反馈。

---

代码示例

1. 基础 3 列宫格 (3 Columns)

通过 columns 属性指定网格列数，默认为 4 列。使用 mu-grid-item 进行项填充。

<template>
  <mu-grid :column="3">
    <mu-grid-item icon="user" text="个人中心" @click="handleClick('个人中心')" />
    <mu-grid-item icon="bell" text="消息通知" @click="handleClick('消息通知')" />
    <mu-grid-item icon="settings" text="系统设置" @click="handleClick('系统设置')" />
  </mu-grid>
</template>

<script setup>
const handleClick = (name) => {
  console.log('点击了宫格:', name)
}
</script>

---

2. 4 列宫格与徽章角标 (Badges)

在 mu-grid-item 上配置 badge 或 dot 显示数字提示、文字红点徽标。

<template>
  <mu-grid :column="4">
    <mu-grid-item icon="heart" text="收藏" badge="HOT" />
    <mu-grid-item icon="share" text="分享" badge="NEW" />
    <mu-grid-item icon="star" text="加星" badge="99+" />
    <mu-grid-item icon="check" text="已办" dot />
  </mu-grid>
</template>

---

3. 无边框平铺形态 (Borderless)

设置 :border="false" 隐藏分割粗线，呈现极简平铺形态。

<template>
  <mu-grid :column="4" :border="false">
    <mu-grid-item icon="edit" text="编辑" />
    <mu-grid-item icon="delete" text="删除" />
    <mu-grid-item icon="filter" text="筛选" />
    <mu-grid-item icon="more" text="更多" />
  </mu-grid>
</template>

---

API 属性说明

Grid Props

参数名	说明	类型	可选值	默认值
columns	宫格列数	Number | String	-	4
border	是否显示网格分割线	Boolean	true | false	true
square	是否保持 1:1 正方形网格	Boolean	true | false	false
gutter	宫格间距 (rpx)	Number | String	-	0
clickable	是否开启按压反馈与点击手势	Boolean	true | false	true
mode	宫格展现模式	String	normal | card	'normal'
background	宫格容器背景颜色	String	-	''

GridItem Props

参数名	说明	类型	可选值	默认值
text	标题文案	String	-	''
subText	副标题文案	String	-	''
icon	矢量图标名称或图片网络链接	String	-	''
iconSize	图标尺寸 (rpx)	Number | String	-	24
iconColor	图标颜色	String	-	''
textColor	标题文字颜色	String	-	''
badge	徽章文案或数字	Number | String	-	0
dot	是否显示为小红点	Boolean	true | false	false

---

事件说明

事件名	说明	回调参数
click	点击宫格单项时触发	({ index: Number, text: String })

---

插槽说明 (Slots)

插槽名	说明
default	宫格子项 <mu-grid-item> 填充容器插槽