ImageGrid 图片网格

用于微信朋友圈相册、社交图文动态、图片凭证平铺排版的图片网格控件，支持 1/2/4/9 格黄金自适应排版、超出 +N 遮罩暗化与点击大图全屏预览。

---

代码示例

1. 朋友圈九宫格 (Automatic Grid)

传入 images 图片链接数组。单张自动居中展示、2/4 张双列展现、3/6/9 张三列自动网格排列。点击图片默认调用原生全屏大图预览。

<template>
  <mu-image-grid :images="imageList" />
</template>

<script setup>
import { ref } from 'vue'

const imageList = ref([
  'https://picsum.photos/400/400?random=1',
  'https://picsum.photos/400/400?random=2',
  'https://picsum.photos/400/400?random=3',
  'https://picsum.photos/400/400?random=4',
  'https://picsum.photos/400/400?random=5',
  'https://picsum.photos/400/400?random=6'
])
</script>

---

2. 限制最大展示数 (Max Limit)

设置 :max="4" 时，如果传入图片多于 4 张，第 4 张图片右下角会自动覆盖 +N 模糊暗化遮罩。

<template>
  <mu-image-grid :images="imageList" :max="4" />
</template>

---

3. 可删除形态 (Deletable)

设置 deletable 开启右上角删除圆点按键，点击触发 @delete 事件。

<template>
  <mu-image-grid :images="images" deletable @delete="onDelete" />
</template>

<script setup>
import { ref } from 'vue'
const images = ref(['https://picsum.photos/400/400?random=7'])

const onDelete = ({ index }) => {
  images.value.splice(index, 1)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
images	图片链接数组 (支持字符串 URL 数组或对象 [{url, desc}])	Array	-	[]
max	最多在网格中显示的张数	Number	-	9
columns	强制指定网格列数 (0 为微信朋友圈 1/2/3 列智能自适应)	Number | String	-	0
gap	图片之间的间隔距离 (rpx)	Number | String	-	12
radius	图片圆角 (rpx)	Number | String	-	16
mode	排版展示模式	String	grid | scroll	'grid'
preview	点击是否自动打开大图预览	Boolean	true | false	true
deletable	是否在右上角显示删除图标按钮	Boolean	true | false	false

---

事件说明 (Events)

事件名	说明	回调参数
click	点击单张图片时触发	({ index: Number, src: String })
preview	触发全屏大图预览时触发	({ index: Number, src: String })
delete	点击右上角删除图标时触发	({ index: Number, item: String | Object })