# TileGrid 组件

## 简介
TileGrid 是一个通用的瓦片网格组件，用于显示一排均匀分布的瓦片图片。

## 功能
- 支持自定义瓦片数量
- 支持自定义瓦片图片
- 自动均匀分布瓦片
- 响应式布局

## 使用方法

### 1. 导入组件
```javascript
import TileGrid from "../../components/tile-grid/tile-grid.vue";
```

### 2. 注册组件
```javascript
export default {
  components: {
    TileGrid
  }
}
```

### 3. 在模板中使用
```vue
<template>
  <view class="page">
    <!-- 使用默认10个瓦片 -->
    <tile-grid :tile-image="tilesImageEnum.TILE" />
    
    <!-- 自定义瓦片数量 -->
    <tile-grid :tile-count="5" :tile-image="tilesImageEnum.TILE" />
    
    <!-- 使用自定义图片 -->
    <tile-grid :tile-count="8" :tile-image="customTileImage" />
  </view>
</template>
```

## Props 参数

| 参数 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| tileCount | Number | 10 | 否 | 瓦片数量 |
| tileImage | String | - | 是 | 瓦片图片URL |

## 样式说明
- 瓦片网格使用 `flex` 布局，自动均匀分布
- 每个瓦片图片尺寸为 `75rpx × 48rpx`
- 瓦片间距通过 `justify-content: space-between` 自动计算

## 注意事项
- 确保传入的图片URL有效
- 瓦片数量建议在 1-20 之间，避免过多影响性能
- 组件会自动适应容器宽度