AvatarList 头像列表

一组用户头像，常用在项目/团队成员列表。可以设置尺寸，也可以限制最多显示数量。

基础用法

data参数为对象数组，对象中需要有一个属性，默认为url，用来展示图片。

<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>

最大值设置

3

可以通过url-field属性配置url对应的属性键。

<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

参数	说明	类型	可选值	默认值
data	数据列表	Record<string, any>[]	—	[]
indent	图片之间的重叠距离，可以是各种css单位	string	-	图片宽度一半的负值
popover-props	弹框属性，参见Element Plus Popover 文档	string	-	-
size	图片大小	number / string	参考Element Plus Avatar 组件参数	default
shape	图片形状	string	参考Element Plus Avatar 组件参数	circle
fit	确定图片如何适应容器框，同原生 object-fit	string	fill / contain / cover / none / scale-down	cover
max	显示的最大数量，超过此值将会在最后显示一个剩余值	number	—	-
max-bg-color	剩余值的背景颜色	string	—	black
url-field	data对象配置项, 指定图片url属性键值	string	—	url

Slots

名称	说明
tip	滑动提示信息，参数为data中对应的对象: item

Events

事件名称	说明	回调参数
click	图片单击事件	data中对应的对象