feat: 头像列表

src/components/Avatars/index.ts

@@ -1,3 +1,4 @@
 import Avatars from './src/Avatars.vue'
 
+export type { AvatarItem } from './src/types'
 export { Avatars }

src/components/Avatars/src/Avatars.vue

@@ -1,15 +1,79 @@
 <script setup lang="ts">
-import { ComponentSize } from 'element-plus'
-import { PropType } from 'vue'
+import { ComponentSize, ElAvatar, ElTooltip } from 'element-plus'
+import { PropType, computed } from 'vue'
+import { AvatarItem } from './types'
+import { useDesign } from '@/hooks/web/useDesign'
 
-defineProps({
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('avatars')
+
+const props = defineProps({
   size: {
-    type: String as PropType<ComponentSize>,
+    type: [String, Number] as PropType<ComponentSize | number>,
     default: ''
+  },
+  max: {
+    type: Number,
+    default: 5
+  },
+  data: {
+    type: Array as PropType<AvatarItem[]>,
+    default: () => []
+  },
+  showTooltip: {
+    type: Boolean,
+    default: true
   }
 })
+
+const filterData = computed(() => props.data.slice(0, props.max))
 </script>
 
 <template>
-  <div> 头像 </div>
+  <div :class="prefixCls" class="flex items-center">
+    <template v-for="item in filterData" :key="item.url">
+      <template v-if="showTooltip && item.name">
+        <ElTooltip :content="item.name" placement="top">
+          <ElAvatar
+            :size="size"
+            :src="item.url"
+            class="relative"
+            :style="{
+              zIndex: filterData.indexOf(item)
+            }"
+          />
+        </ElTooltip>
+      </template>
+      <template v-else>
+        <ElAvatar
+          :size="size"
+          :src="item.url"
+          class="relative"
+          :style="{
+            zIndex: filterData.indexOf(item)
+          }"
+        />
+      </template>
+    </template>
+
+    <ElAvatar
+      v-if="data.length > max"
+      :style="{
+        zIndex: data.length
+      }"
+    >
+      <span>+{{ data.length - max }}</span>
+    </ElAvatar>
+  </div>
 </template>
+
+<style scoped lang="less">
+@prefix-cls: ~'@{namespace}-avatars';
+
+.@{prefix-cls} {
+  .@{elNamespace}-avatar + .@{elNamespace}-avatar {
+    margin-left: -15px;
+  }
+}
+</style>

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

@@ -0,0 +1,4 @@
+export interface AvatarItem {
+  url: string
+  name?: string
+}

src/components/Backtop/src/Backtop.vue

@@ -9,7 +9,7 @@ const prefixCls = getPrefixCls('backtop')
 
 <template>
   <ElBacktop
-    :class="`${prefixCls}-backtop`"
+    :class="prefixCls"
     :target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
   />
 </template>

src/views/Components/Avatars.vue

@@ -1,13 +1,53 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Avatars } from '@/components/Avatars'
+import { Avatars, AvatarItem } from '@/components/Avatars'
+import { ref } from 'vue'
 
 const { t } = useI18n()
+
+const data = ref<AvatarItem[]>([
+  {
+    name: 'Lily',
+    url: 'https://avatars.githubusercontent.com/u/3459374?v=4'
+  },
+  {
+    name: 'Amanda',
+    url: 'https://avatars.githubusercontent.com/u/3459375?v=4'
+  },
+  {
+    name: 'Daisy',
+    url: 'https://avatars.githubusercontent.com/u/3459376?v=4'
+  },
+  {
+    name: 'Olivia',
+    url: 'https://avatars.githubusercontent.com/u/3459377?v=4'
+  },
+  {
+    name: 'Tina',
+    url: 'https://avatars.githubusercontent.com/u/3459378?v=4'
+  },
+  {
+    name: 'Kitty',
+    url: 'https://avatars.githubusercontent.com/u/3459323?v=4'
+  },
+  {
+    name: 'Helen',
+    url: 'https://avatars.githubusercontent.com/u/3459324?v=4'
+  },
+  {
+    name: 'Sophia',
+    url: 'https://avatars.githubusercontent.com/u/3459325?v=4'
+  },
+  {
+    name: 'Wendy',
+    url: 'https://avatars.githubusercontent.com/u/3459326?v=4'
+  }
+])
 </script>
 
 <template>
   <ContentWrap :title="t('router.avatars')" :message="t('avatarsDemo.title')">
-    <Avatars />
+    <Avatars :data="data" />
   </ContentWrap>
 </template>