42 lines
904 B
Vue
42 lines
904 B
Vue
<template>
|
|
<div>
|
|
<Avatar v-for="member in members"
|
|
:key="member.id"
|
|
:user-id="member.id"
|
|
:avatar-url="member.avatar"
|
|
:isMod="member.isMod"
|
|
:isOwner="member.isOwner"
|
|
:isAdmin="member.isAdmin"
|
|
:class="`avatar`"/>
|
|
|
|
<Circle style="z-index: 10;" class="avatar" v-if="length > 4">+ {{ length - 4}}</Circle>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
<script setup>
|
|
import Avatar from '../UI/Avatar.vue';
|
|
import Circle from '../UI/Circle.vue';
|
|
|
|
const props = defineProps({
|
|
members: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
})
|
|
|
|
// ne garder que les quatres premiers membres
|
|
const length = props.members.length;
|
|
const members = props.members.slice(0, 4);
|
|
|
|
</script>
|
|
<style scoped>
|
|
div{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
margin-left: -10px; /* Ajustez cette valeur pour contrôler le chevauchement */
|
|
}
|
|
</style> |