feiYi/src/components/small/ImageLine.vue

<template>
  <div class="w-100 d-flex flex-row align-stretch" :style="{ gap: gap }">
    <slot 
      name="item"
      v-for="(v, k) in showData"
      :key="k"
      :item="v"
      :index="k"
      :width="`calc(${100 / visibleCount}% - ${gap})`"
      :height="imageHeight"
      :url="imagekey ? v[imagekey] : v" 
    >
      <img 
        :src="imagekey ? v[imagekey] : v" 
        :style="{ 
          width: `calc(${100 / visibleCount}% - ${gap})`,
          height: imageHeight,
          borderRadius: '5px',
          objectFit: 'cover',
        }"
        tabindex="0"
        @click="()=>emit('itemClick', v)"
      />
    </slot>
    <div 
      v-if="visibleCount > maxCount" 
      class="d-flex flex-column align-center justify-center bg-light cursor-pointer radius-base"
      :style="{ 
        width: `calc(${100 / visibleCount}% - ${gap})`,
        height: imageHeight,
        borderRadius: '5px',
        objectFit: 'cover',
      }"
      tabindex="0"
      @click="()=>emit('moreClick')"
    >
      <div class="w-100 h-100 bg-light d-flex flex-column align-center justify-center">
        <div class="size-s">+{{ data.length - maxCount }}</div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({	
  maxCount : {
    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,
  },
  scroll: {
    type: Boolean,
    default: true,
  }
})


const showData = computed(() => {
  if (!props.data)
    return []
  return props.data.slice(0, props.maxCount)
});

const visibleCount = computed(() => {
  if (!props.data)
    return 0
  return props.data.length > props.maxCount ? (props.maxCount + 1) : props.maxCount
});

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