1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| <template>
| <view class="tn-avatar-group-class tn-avatar-group">
| <view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle(index)]">
| <tn-avatar
| :src="item.src || ''"
| :text="item.text || ''"
| :icon="item.icon || ''"
| :size="size"
| :shape="shape"
| :imgMode="imgMode"
| :border="true"
| backgroundColor="rgba(255, 255, 255, 0.4)"
| :borderSize="4"
| ></tn-avatar>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| name: 'tn-avatar-group',
| props: {
| // 头像列表
| lists: {
| type: Array,
| default() {
| return []
| }
| },
| // 头像类型
| // square 带圆角正方形 circle 圆形
| shape: {
| type: String,
| default: 'circle'
| },
| // 大小
| // sm 小头像 lg 大头像 xl 加大头像
| // 如果为其他则认为是直接设置大小
| size: {
| type: [Number, String],
| default: ''
| },
| // 当设置为显示头像信息时，
| // 图片的裁剪模式
| imgMode: {
| type: String,
| default: 'aspectFill'
| },
| // 头像之间的遮挡比例
| // 0.4 代表 40%
| gap: {
| type: Number,
| default: 0.4
| }
| },
| computed: {
| itemStyle() {
| return (index) => {
| let style = {}
| if (this._checkSizeIsInline()) {
| switch(this.size) {
| case 'sm':
| style.marginLeft = index != 0 ? `${-48 * this.gap}rpx` : ''
| break
| case 'lg':
| style.marginLeft = index != 0 ? `${-96 * this.gap}rpx` : ''
| break
| case 'xl':
| style.marginLeft = index != 0 ? `${-128 * this.gap}rpx` : ''
| break
| }
| } else {
| const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64
| style.marginLeft = index != 0 ? `-${size * this.gap}rpx` : ''
| }
| return style
| }
| }
| },
| data() {
| return {
|
| }
| },
| methods: {
| // 检查是否使用内置的大小进行设置
| _checkSizeIsInline() {
| if (/(xs|sm|md|lg|xl|xxl)/.test(this.size)) return true
| else return false
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .tn-avatar-group {
| display: flex;
| flex-direction: row;
|
| &__item {
| position: relative;
| }
| }
| </style>
|
|
