68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<view class="flex flex-col items-center justify-center rounded overflow-hidden bg-gray border"
|
||
|
|
: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')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
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.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>
|