diff --git a/api/institutionalStructure.js b/api/institutionalStructure/institutionalStructure.js similarity index 100% rename from api/institutionalStructure.js rename to api/institutionalStructure/institutionalStructure.js diff --git a/components/tile-grid/README.md b/components/tile-grid/README.md index 7575ed6..338eed8 100644 --- a/components/tile-grid/README.md +++ b/components/tile-grid/README.md @@ -1,59 +1,91 @@ -# TileGrid 组件 +# TileGrid 瓦片网格组件 -## 简介 -TileGrid 是一个通用的瓦片网格组件,用于显示一排均匀分布的瓦片图片。 +一个可复用的瓦片网格组件,默认使用 CommonEnum.TILE 作为瓦片图片,支持自定义图片和数量,适用于 Vue2/uni-app 项目。 -## 功能 -- 支持自定义瓦片数量 +## 功能特性 +- 默认使用 CommonEnum.TILE 作为瓦片图片 - 支持自定义瓦片图片 +- 支持自定义瓦片数量 +- 响应式网格布局 - 自动均匀分布瓦片 -- 响应式布局 -## 使用方法 +## 基本用法 -### 1. 导入组件 -```javascript -import TileGrid from "../../components/tile-grid/tile-grid.vue"; -``` +### 使用默认瓦片图片和数量 +```vue + + + ``` -### 3. 在模板中使用 +### 使用自定义瓦片图片 ```vue + + +``` + +### 自定义瓦片数量 +```vue + ``` -## Props 参数 +### 同时自定义图片和数量 +```vue + +``` -| 参数 | 类型 | 默认值 | 必填 | 说明 | -|------|------|--------|------|------| -| tileCount | Number | 10 | 否 | 瓦片数量 | -| tileImage | String | - | 是 | 瓦片图片URL | +## Props +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ------ | ------ | -------------------- | +| tileCount | Number | 10 | 瓦片数量 | +| tileImage | String | '' | 自定义瓦片图片地址 | + +## 默认行为 +- 如果不传递 `tileImage`,组件会自动使用 `CommonEnum.TILE` 作为默认瓦片图片 +- 如果传递了 `tileImage`,则使用自定义图片 +- 默认显示 10 个瓦片,可通过 `tileCount` 调整 ## 样式说明 -- 瓦片网格使用 `flex` 布局,自动均匀分布 -- 每个瓦片图片尺寸为 `75rpx × 48rpx` +- 使用 flex 布局,瓦片自动均匀分布 +- 每个瓦片图片尺寸为 75rpx × 48rpx - 瓦片间距通过 `justify-content: space-between` 自动计算 +- 支持响应式布局 ## 注意事项 -- 确保传入的图片URL有效 -- 瓦片数量建议在 1-20 之间,避免过多影响性能 -- 组件会自动适应容器宽度 \ No newline at end of file +1. 组件会自动导入 CommonEnum,无需手动引入 +2. 建议瓦片数量在 1-20 之间,避免过多影响性能 +3. 确保传入的图片URL有效 +4. 组件会自动适应容器宽度 + +--- +如有更多需求,欢迎扩展! \ No newline at end of file diff --git a/components/tile-grid/tile-grid.vue b/components/tile-grid/tile-grid.vue index a799062..7c9a1e2 100644 --- a/components/tile-grid/tile-grid.vue +++ b/components/tile-grid/tile-grid.vue @@ -1,24 +1,37 @@