# TileGrid 瓦片网格组件

一个可复用的瓦片网格组件，默认使用 CommonEnum.TILE 作为瓦片图片，支持自定义图片和数量，适用于 Vue2/uni-app 项目。

## 功能特性
- 默认使用 CommonEnum.TILE 作为瓦片图片
- 支持自定义瓦片图片
- 支持自定义瓦片数量
- 响应式网格布局
- 自动均匀分布瓦片

## 基本用法

### 使用默认瓦片图片和数量
```vue
<template>
  <tile-grid />
</template>

<script>
import TileGrid from '@/components/tile-grid/tile-grid.vue'

export default {
  components: {
    TileGrid
  }
}
</script>
```

### 使用自定义瓦片图片
```vue
<template>
  <tile-grid :tile-image="customTileImage" />
</template>

<script>
import TileGrid from '@/components/tile-grid/tile-grid.vue'

export default {
  components: {
    TileGrid
  },
  data() {
    return {
      customTileImage: 'https://example.com/custom-tile.png'
    }
  }
}
</script>
```

### 自定义瓦片数量
```vue
<template>
  <tile-grid :tile-count="5" />
</template>
```

### 同时自定义图片和数量
```vue
<template>
  <tile-grid :tile-count="8" :tile-image="customTileImage" />
</template>
```

## Props
| 属性名    | 类型   | 默认值 | 说明                 |
| --------- | ------ | ------ | -------------------- |
| tileCount | Number | 10     | 瓦片数量             |
| tileImage | String | ''     | 自定义瓦片图片地址   |

## 默认行为
- 如果不传递 `tileImage`，组件会自动使用 `CommonEnum.TILE` 作为默认瓦片图片
- 如果传递了 `tileImage`，则使用自定义图片
- 默认显示 10 个瓦片，可通过 `tileCount` 调整

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

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

---
如有更多需求，欢迎扩展！