<template> <div v-if="avatars" class="avatar-list-wrap"> <ul v-if="avatarList" class="avatar-list"> <li v-for="(item, index) in avatarList" :key="index" :style="item.style"> <WidgetAvatar :src="item.src" :width="100" :height="100"></WidgetAvatar> </li> <li v-if="hasMore"> <img src="//img12.static.yhbimg.com/evidenceImages/2019/01/30/17/02fdbbddfc30f18868f91406eed8a70fb9.png?imageMogr2/thumbnail/130x130/extent/130x130/background/d2hpdGU=/position/center/quality/90"> </li> </ul> </div> </template> <script> export default { name: 'WidgetAvatarGroup', props: { avatars: Array, option: { type: Object, default() { return { srcKey: 'src', maxDisplayNum: 0 }; } } }, data() { return { hasMore: false } }, computed: { avatarList() { let list = []; let length = this.avatars && this.avatars.length; if (this.option.maxDisplayNum > 0 && this.avatars.length > this.option.maxDisplayNum) { length = this.option.maxDisplayNum; this.hasMore = true; } for (let i = 0; i < length; i++) { let avt = this.avatars[i]; let src = avt; if (this.option.srcKey && typeof avt !== 'string') { src = avt[this.option.srcKey] || ''; } list.push({ src: src, style: `z-index: ${length - i};` }); } return list; } } }; </script> <style type="css"> .avatar-list-wrap { display: inline-block; vertical-align: middle; } .avatar-list { display: flex; li { width: 60px; height: 60px; border: 1px solid #fff; border-radius: 50%; overflow: hidden; margin-left: -18px; position: relative; &:first-child { margin-left: 0; } img { display: block; width: 100%; height: 100%; } } } </style>