AvatarList

A group of user avatars, commonly used in project/team member lists. You can set the size and also limit the maximum number of avatars displayed.

Basic

The data parameter is an array of objects. Each object needs to have one property, which defaults to url, used to display the image.

<template>
  <epp-avatar-list :data="list" indent="-10px" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const list = ref([
  {
    url: 'https://png.pngtree.com/png-clipart/20190520/original/pngtree-vector-users-icon-png-image_4144740.jpg',
  },
  {
    url: 'https://png.pngtree.com/png-clipart/20190614/original/pngtree-female-avatar-vector-icon-png-image_3725439.jpg',
    title: 'Avatar 2',
  },
  {
    url: 'https://png.pngtree.com/png-clipart/20190614/original/pngtree-male-student-icon-png-image_3728104.jpg',
    title: 'Avatar 3',
  },
  {
    url: 'https://png.pngtree.com/png-clipart/20190924/original/pngtree-human-avatar-free-vector-png-image_4825373.jpg',
    title: 'Avatar 4',
  },
]);
</script>

Maximum Value Setting

3

You can configure the key for the url property using the url-field prop.

<template>
  <epp-avatar-list :data="list" :max="5" url-field="img">
    <template #tip="{ item }">
      <h5>Name：{{ item.name }}</h5>
    </template>
  </epp-avatar-list>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const list = ref([
  {
    img: 'https://png.pngtree.com/png-clipart/20190520/original/pngtree-vector-users-icon-png-image_4144740.jpg',
    name: 'Jack',
  },
  {
    img: 'https://png.pngtree.com/png-clipart/20190614/original/pngtree-female-avatar-vector-icon-png-image_3725439.jpg',
    name: 'Musk',
  },
  {
    img: 'https://png.pngtree.com/png-clipart/20190614/original/pngtree-male-student-icon-png-image_3728104.jpg',
    name: 'Mary',
  },
  {
    img: 'https://png.pngtree.com/png-clipart/20190924/original/pngtree-human-avatar-free-vector-png-image_4825373.jpg',
    name: 'Tom',
  },
  {
    img: 'https://png.pngtree.com/png-clipart/20190520/original/pngtree-vector-users-icon-png-image_4144740.jpg',
    name: 'Dog',
  },
  {
    img: 'https://png.pngtree.com/png-clipart/20190614/original/pngtree-female-avatar-vector-icon-png-image_3725439.jpg',
    name: 'Cat',
  },
  {
    img: 'https://png.pngtree.com/png-clipart/20190614/original/pngtree-male-student-icon-png-image_3728104.jpg',
    name: 'Banana',
  },
  {
    img: 'https://png.pngtree.com/png-clipart/20190924/original/pngtree-human-avatar-free-vector-png-image_4825373.jpg',
    name: 'Pear',
  },
]);
</script>

Attributes

Parameter	Description	Type	Optional Values	Default Value
data	Data list	Record<string, any>[]	—	[]
indent	The overlapping distance between images, can be various CSS units	string	-	图片宽度一半的负值
popover-props	Popover properties, see Element Plus Popover documentation	string	-	-
size	Image size	number / string	参考Element Plus Avatar 组件参数	default
shape	Image shape	string	参考Element Plus Avatar 组件参数	circle
fit	Determines how the image fits within its container box, same as native object-fit	string	fill / contain / cover / none / scale-down	cover
max	The maximum number of avatars to display. If exceeded, a remainder will be shown at the end	number	—	-
max-bg-color	Background color of the remainder value	string	—	black
url-field	Data object configuration item, specifies the key for the image URL property	string	—	url

Slots

Name	Description
tip	Tooltip information, the parameter is the corresponding object in the data: item

Events

Event Name	Description	Callback Parameter
click	Image click event	The corresponding object in data