minnan-website/components/content/ImageGrid.vue

<template>
  <div class="w-100 d-flex flex-row flex-wrap" :style="{ gap: gap }">
    <slot 
      name="item"
      v-for="(v, k) in data"
      :key="k"
      :item="v"
      :index="k"
      :width="`calc(${100 / rowCount}% - ${gap})`"
      :height="imageHeight"
      :url="imagekey ? v[imagekey] : v" 
    >
      <img 
        :src="imagekey ? v[imagekey] : v" 
        :style="{ 
          width: `calc(${100 / rowCount}% - ${gap})`,
          height: imageHeight,
          borderRadius: '5px',
          objectFit: 'cover',
        }"
        @click="()=>emit('itemClick', v)"
      />
    </slot>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';

defineProps({	
  rowCount : {
    type: Number,
    default: 3,
  },
  imagekey : {
    type: String,
    default: undefined,
  },
  imageHeight : {
    type: String,
    default: undefined,
  },
  gap: {
    type: String,
    default: '10px',
  },
  data: {
    type: Object as PropType<any[]>,
    default: null,
  },
})

const emit = defineEmits([	
  "itemClick"	
])
</script>