vue-element-plus-admin-doc/components/avatars.md

Avatars 头像列表

展示多个头像集合

Avatars 组件位于 src/components/Avatars 内

用法

<script lang="ts" setup>
import { Avatars } from '@/components/Avatars'

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>
  <Avatars :data="data" />
</template>

Avatars 属性

属性	说明	类型	可选值	默认值
size	头像尺寸	ComponentSize、number	-	-
max	最大展示个数	number	-	5
data	头像数据，详见	AvatarItem[]	-	-
showTooltip	是否展示名称tip	boolean	-	true

data

属性	说明	类型	可选值	默认值
url	头像图片地址	string	-	-
name	名称，非必填	string	-	-