Skip to content

Commit 3bf28a5

Browse files
kailong321200875kailong321200875
committed
feat: 头像列表
1 parent 7f6464a commit 3bf28a5

File tree

5 files changed

+117
-8
lines changed

5 files changed

+117
-8
lines changed

‎src/components/Avatars/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import Avatars from './src/Avatars.vue'
22

3+
export type { AvatarItem } from './src/types'
34
export { Avatars }

‎src/components/Avatars/src/Avatars.vue

Lines changed: 69 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,79 @@
11
<script setup lang="ts">
2-
import { ComponentSize } from 'element-plus'
3-
import { PropType } from 'vue'
2+
import { ComponentSize, ElAvatar, ElTooltip } from 'element-plus'
3+
import { PropType, computed } from 'vue'
4+
import { AvatarItem } from './types'
5+
import { useDesign } from '@/hooks/web/useDesign'
46
5-
defineProps({
7+
const { getPrefixCls } = useDesign()
8+
9+
const prefixCls = getPrefixCls('avatars')
10+
11+
const props = defineProps({
612
size: {
7-
type: String as PropType<ComponentSize>,
13+
type: [String, Number] as PropType<ComponentSize | number>,
814
default: ''
15+
},
16+
max: {
17+
type: Number,
18+
default: 5
19+
},
20+
data: {
21+
type: Array as PropType<AvatarItem[]>,
22+
default: () => []
23+
},
24+
showTooltip: {
25+
type: Boolean,
26+
default: true
927
}
1028
})
29+
30+
const filterData = computed(() => props.data.slice(0, props.max))
1131
</script>
1232

1333
<template>
14-
<div> 头像 </div>
34+
<div :class="prefixCls" class="flex items-center">
35+
<template v-for="item in filterData" :key="item.url">
36+
<template v-if="showTooltip && item.name">
37+
<ElTooltip :content="item.name" placement="top">
38+
<ElAvatar
39+
:size="size"
40+
:src="item.url"
41+
class="relative"
42+
:style="{
43+
zIndex: filterData.indexOf(item)
44+
}"
45+
/>
46+
</ElTooltip>
47+
</template>
48+
<template v-else>
49+
<ElAvatar
50+
:size="size"
51+
:src="item.url"
52+
class="relative"
53+
:style="{
54+
zIndex: filterData.indexOf(item)
55+
}"
56+
/>
57+
</template>
58+
</template>
59+
60+
<ElAvatar
61+
v-if="data.length > max"
62+
:style="{
63+
zIndex: data.length
64+
}"
65+
>
66+
<span>+{{ data.length - max }}</span>
67+
</ElAvatar>
68+
</div>
1569
</template>
70+
71+
<style scoped lang="less">
72+
@prefix-cls: ~'@{namespace}-avatars';
73+
74+
.@{prefix-cls} {
75+
.@{elNamespace}-avatar + .@{elNamespace}-avatar {
76+
margin-left: -15px;
77+
}
78+
}
79+
</style>

‎src/components/Avatars/src/types/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface AvatarItem {
2+
url: string
3+
name?: string
4+
}

‎src/components/Backtop/src/Backtop.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const prefixCls = getPrefixCls('backtop')
99

1010
<template>
1111
<ElBacktop
12-
:class="`${prefixCls}-backtop`"
12+
:class="prefixCls"
1313
:target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
1414
/>
1515
</template>

‎src/views/Components/Avatars.vue

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,53 @@
11
<script setup lang="ts">
22
import { ContentWrap } from '@/components/ContentWrap'
33
import { useI18n } from '@/hooks/web/useI18n'
4-
import { Avatars } from '@/components/Avatars'
4+
import { Avatars, AvatarItem } from '@/components/Avatars'
5+
import { ref } from 'vue'
56
67
const { t } = useI18n()
8+
9+
const data = ref<AvatarItem[]>([
10+
{
11+
name: 'Lily',
12+
url: 'https://avatars.githubusercontent.com/u/3459374?v=4'
13+
},
14+
{
15+
name: 'Amanda',
16+
url: 'https://avatars.githubusercontent.com/u/3459375?v=4'
17+
},
18+
{
19+
name: 'Daisy',
20+
url: 'https://avatars.githubusercontent.com/u/3459376?v=4'
21+
},
22+
{
23+
name: 'Olivia',
24+
url: 'https://avatars.githubusercontent.com/u/3459377?v=4'
25+
},
26+
{
27+
name: 'Tina',
28+
url: 'https://avatars.githubusercontent.com/u/3459378?v=4'
29+
},
30+
{
31+
name: 'Kitty',
32+
url: 'https://avatars.githubusercontent.com/u/3459323?v=4'
33+
},
34+
{
35+
name: 'Helen',
36+
url: 'https://avatars.githubusercontent.com/u/3459324?v=4'
37+
},
38+
{
39+
name: 'Sophia',
40+
url: 'https://avatars.githubusercontent.com/u/3459325?v=4'
41+
},
42+
{
43+
name: 'Wendy',
44+
url: 'https://avatars.githubusercontent.com/u/3459326?v=4'
45+
}
46+
])
747
</script>
848

949
<template>
1050
<ContentWrap :title="t('router.avatars')" :message="t('avatarsDemo.title')">
11-
<Avatars />
51+
<Avatars :data="data" />
1252
</ContentWrap>
1353
</template>

0 commit comments

Comments
 (0)