59 lines
1.4 KiB
Markdown
59 lines
1.4 KiB
Markdown
# 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 之间，避免过多影响性能
|
||
- 组件会自动适应容器宽度 |