Blame view

apps/components/widgets/widget-avatar-group.vue 1.95 KB
yyq authored
1
<template>
yyq authored
2
  <div v-if="avatars" class="avatar-list-wrap">
yyq authored
3 4
    <ul v-if="avatarList" class="avatar-list">
        <li v-for="(item, index) in avatarList" :key="index" :style="item.style">
yyq authored
5
          <WidgetAvatar :src="item.src" :width="100" :height="100"></WidgetAvatar>
yyq authored
6 7
        </li>
        <li v-if="hasMore">
yyq authored
8
          <img src="//img12.static.yhbimg.com/evidenceImages/2019/01/30/17/02fdbbddfc30f18868f91406eed8a70fb9.png?imageMogr2/thumbnail/130x130/extent/130x130/background/d2hpdGU=/position/center/quality/90">
yyq authored
9 10 11 12 13 14
        </li>
    </ul>
  </div>
</template>

<script>
yyq authored
15 16 17 18 19 20 21 22 23 24 25
export default {
  name: 'WidgetAvatarGroup',
  props: {
    avatars: Array,
    option: {
      type: Object,
      default() {
        return {
          srcKey: 'src',
          maxDisplayNum: 0
        };
yyq authored
26
      }
yyq authored
27 28 29 30 31 32 33 34 35 36 37
    }
  },
  data() {
    return {
      hasMore: false
    };
  },
  computed: {
    avatarList() {
      let list = [];
      let length = this.avatars && this.avatars.length;
yyq authored
38
yyq authored
39 40 41 42
      if (this.option.maxDisplayNum > 0 && this.avatars.length > this.option.maxDisplayNum) {
        length = this.option.maxDisplayNum;
        this.hasMore = true;
      }
yyq authored
43
yyq authored
44 45 46
      for (let i = 0; i < length; i++) {
        let avt = this.avatars[i];
        let src = avt;
yyq authored
47
yyq authored
48 49
        if (this.option.srcKey && typeof avt !== 'string') {
          src = avt[this.option.srcKey] || '';
yyq authored
50 51
        }
yyq authored
52 53 54 55
        list.push({
          src: src,
          style: `z-index: ${length - i};`
        });
yyq authored
56
      }
yyq authored
57 58

      return list;
yyq authored
59
    }
yyq authored
60 61
  }
};
yyq authored
62 63 64 65 66
</script>

<style type="css">
  .avatar-list-wrap {
    display: inline-block;
yyq authored
67
    vertical-align: middle;
yyq authored
68
  }
yyq authored
69
yyq authored
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
  .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>