ykt-team-wxapp/components/group-avatar.vue

<template>
  <view :class="['flex', 'flex-col', 'items-center', 'justify-center', 'overflow-hidden', 'bg-gray', 'border', { 'rounded-circle': classType === 'circle' }]"
    :style="`width:${size.lg}rpx; height: ${size.lg}rpx;`" @click="reGenerate()">
    <view v-for="(item, index) in groups.list" :key="index" class="flex justify-center">
      <image v-for="(url, idx) in item" :key="idx" :src="url" :style="groups.style"></image>
    </view>
  </view>
</template>
<script setup>
import { computed, ref } from 'vue';
const props = defineProps({
  size: {
    type: Number,
    default: 144
  },
  avatarList: {
    type: Array,
    default: () => []
    // default: ()=>new Array(9).fill('https://picsum.photos/300/300')
  },
  classType: {
    type: String,
    default: 'circle',
    validator: (value) => ['circle', 'square'].includes(value)
  }
})

const list = computed(() => props.avatarList.map(i => i || '/static/default-avatar.svg'))

const size = computed(() => {
  const val = Number.isInteger(props.size) && props.size > 0 ? props.size : 144;
  return { lg: val, md: Math.floor(val / 2), sm: Math.floor(val / 3) }
})

const groups = computed(() => {
  if (list.value.length > 6) {
    return {
      list: [list.value.slice(6, 9), list.value.slice(3, 6), list.value.slice(0, 3)],
      style: `width: ${size.value.sm}rpx; height: ${size.value.sm}rpx;`
    }
  }
  if (list.value.length > 4) {
    return {
      list: [list.value.slice(3, 6), list.value.slice(0, 3)],
      style: `width: ${size.value.sm}rpx; height: ${size.value.sm}rpx;`
    }
  }
  if (list.value.length > 2) {
    return {
      list: [list.value.slice(2, 4), list.value.slice(0, 2)],
      style: `width: ${size.value.md}rpx; height: ${size.value.md}rpx;`
    }
  }
  if (list.value.length === 2) {
    return {
      list: [[list.value[1], list.value[0]]],
      style: `width: ${size.value.md}rpx; height: ${size.value.md}rpx;`
    }
  }
  return { list: [list.value.slice(0, 1)], style: `width: ${size.value.lg}rpx; height: ${size.value.lg}rpx;` }
})

function reGenerate() {
  console.log(list.value)
  console.log(groups.value)
}

function getList(size = 9) {
  return new Array(size).fill(1).map((_, idx) => `https://picsum.photos/100/100?${Date.now()}_${idx}`)
}

</script>
<style scoped>
.rounded-circle {
  border-radius: 50%;
}
</style>