buddhism/components/tile-grid/README.md

# 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. 组件会自动适应容器宽度

---

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