74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
|
<view class="flex flex-col items-center justify-center overflow-hidden bg-gray border"
|
|
:class="classType === 'circle' ? 'rounded-circle' : 'rounded-square'"
|
|
:style="`width:${size.lg}rpx; height: ${size.lg}rpx;`">
|
|
<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.png'))
|
|
|
|
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;` }
|
|
})
|
|
|
|
</script>
|
|
<style scoped>
|
|
.rounded-circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.rounded-square {
|
|
border-radius: 16rpx;
|
|
}
|
|
</style>
|