102 lines
2.1 KiB
Markdown
102 lines
2.1 KiB
Markdown
# 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. 组件会自动适应容器宽度
|
||
|
||
---
|
||
|
||
如有更多需求，欢迎扩展！
|