UniApp组件开发七日通-宫格(grid)

<view class="grid" :style="gridStyle">
		<view class="grid-item"  v-for="(vo,index) in prop.list" :key="index" @click="change(index)">
			<view class="grid-item-icon" v-if="vo['icon']" :style="{'border-radius':`${prop.round}px`,'background':vo['background'],'color':vo['color'],'width':`${prop.size}px`,'height':`${prop.size}px`}">
				<h-icon  v-if="vo['icon']" :name="vo['icon']"></h-icon>
			</view>
			<image v-if="vo['image']" :src="vo['image']"  :style="{'border-radius':`${prop.round}px`,'width':`${prop.size}px`,'height':`${prop.size}px`}" class="grid-item-image"></image>
			<view>{{vo['text']}}</view>
		</view>
		<template v-if="prop.list.length % (prop.count||4)">
			<view class="grid-item" v-for="vo in (prop.count||4)-prop.list.length % (prop.count||4)">
			</view>
		</template>
	</view>

首先看模板部分，组件使用了grid布局，循环渲染列表项，支持图标（h-icon）和图片（image）两种展示方式，并且处理了列表长度不足时的占位项。脚本部分定义了props、emit和计算属性，其中gridStyle根据props动态生成样式，change方法触发事件和更新model。样式部分使用了scss，定义了grid和grid-item的样式。

// emit
	const emit = defineEmits(['change'])
	// model
	const model= defineModel()
    // computed
	const gridStyle = computed(() => {
        let obj={}
		if(prop.count){
			obj['grid-template-columns']=`repeat(${prop.count},minmax(0,1fr))`
		}
		if(prop.gap){
			obj['gap']=`${prop.gap}px`
		}
		if(prop.color){
			obj['background']=prop.color
		}
		return obj
	})
	
	const change = (index : number) => {
		model.value=index
		emit('change', index)
	}

接下来，我需要整理组件的基本信息，包括组件名称、功能描述、属性说明、事件说明、使用示例等。属性部分需要从props的注释和定义中提取，包括list、count、gap、color、round、size，每个属性的类型和默认值。事件部分有change事件，参数是索引。model部分支持v-model绑定当前选中的索引。

然后，使用示例部分需要展示如何在父组件中使用h-grid，包括传入list数据、设置属性等。需要注意代码的正确性和格式，使用Vue的模板语法。

最后，确保文档结构清晰，内容准确，覆盖组件的主要功能和使用方法。需要检查是否有遗漏的属性或事件，并确保描述与代码一致。

h-grid 宫格组件文档

一、组件概述

h-grid 是一个基于uni-app开发的宫格（网格）组件，主要用于展示内容列表或作为页面导航入口。支持自定义列数、图标/图片展示、间隔样式、圆角等配置，提供点击事件反馈。

---

二、组件属性（Props）

属性名	类型	默认值	说明
list	Array	-	宫格数据列表，元素格式：{ icon?: string, image?: string, text: string, background?: string, color?: string }（icon与image二选一）
count	Number	3	宫格列数（每一行显示的宫格数量）
gap	Number	-	宫格项之间的间隔（单位：px）
color	String	-	宫格整体背景色
round	Number	40	图标/图片的圆角半径（单位：px）
size	Number	40	图标/图片的尺寸（宽高一致，单位：px）

---

三、事件（Events）

事件名	参数	说明
change	index: number	宫格项被点击时触发，返回当前项的索引（从0开始）

---

四、Model 绑定

支持通过 v-model 双向绑定当前选中项的索引，示例：

<h-grid v-model="selectedIndex" :list="gridList" :count="4" />

---

五、使用示例

基础用法（图标宫格）

<template>
  <h-grid 
    :list="iconList" 
    :count="3" 
    :gap="12" 
    :round="8" 
    :size="50"
    @change="handleGridClick"
  />
</template>

<script setup>
const iconList = [
  { icon: 'home', text: '首页', background: '#f0f8ff', color: '#1e90ff' },
  { icon: 'user', text: '我的', background: '#fff0f5', color: '#ff69b4' },
  { icon: 'message', text: '消息', background: '#f5fffa', color: '#2e8b57' }
]

const handleGridClick = (index) => {
  console.log('点击宫格项索引：', index)
}
</script>

图片宫格用法

<template>
  <h-grid 
    :list="imageList" 
    :count="2" 
    :gap="20" 
    :round="16" 
    :size="80"
  />
</template>

<script setup>
const imageList = [
  { image: '/static/avatar1.png', text: '图片1' },
  { image: '/static/avatar2.png', text: '图片2' },
  { image: '/static/avatar3.png', text: '图片3' }
]
</script>

---

六、样式说明

• 宫格项（.grid-item）默认样式：字体大小12px，内边距12px 0，文字颜色#333，背景色#fff。
• 图标容器（.grid-item-icon）默认背景色#f8f8f8，图标大小18px，底部间隔8px。
• 图片（.grid-item-image）底部间隔8px。

---

七、注意事项

• list 中每个元素需至少包含text字段，icon（使用h-icon组件）和image（图片地址）二选一。

• 当list长度无法整除count时，自动补全空宫格项以保持布局完整。

• 样式自定义可通过覆盖组件的scss类或通过style属性传递动态样式（如color、gap等）。