buddhism/components/tile-grid

TileGrid 瓦片网格组件

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

功能特性

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

基本用法

使用默认瓦片图片和数量

<template>
  <tile-grid />
</template>

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

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

使用自定义瓦片图片

<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>

自定义瓦片数量

<template>
  <tile-grid :tile-count="5" />
</template>

同时自定义图片和数量

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

---

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