Avatar 头像

头像组件用于显示用户头像，支持显示文字头像和图片头像。

导入

import Avatar from '@/components/display/Avatar.vue'

用法

基础用法

通过 size 属性设置头像大小，text 属性设置显示文本，background 属性设置背景色。

<template>
  <FlexRow :gap="20" wrap>
    <Avatar text="张三" :size="80" background="danger" />
    <Avatar text="李四" :size="80" background="success" />
    <Avatar text="王五" :size="80" background="primary" />
  </FlexRow>
  <Height :size="20" />
  <FlexRow :gap="20" wrap>
    <Avatar text="张" :size="60" background="danger" />
    <Avatar text="李" :size="60" background="success" />
    <Avatar text="王" :size="60" background="primary" />
  </FlexRow>
</template>

使用图片头像

通过 url 属性设置使用图片头像。

<template>
  <FlexRow :gap="20" wrap>
    <Avatar url="https://imengyu.top/assets/images/test/2.jpg" :size="100" />
    <Avatar url="https://imengyu.top/assets/images/test/1.jpg" :size="80" />
    <Avatar url="https://imengyu.top/assets/images/test/3.jpg" :size="60" />
  </FlexRow>
</template>

方形头像

通过 round=false 属性设置方形头像。

<template>
  <FlexRow :gap="20" wrap>
    <Avatar url="https://imengyu.top/assets/images/test/2.jpg" :round="false" :size="100" />
    <Avatar url="https://imengyu.top/assets/images/test/1.jpg" :round="false" :size="80" />
    <Avatar url="https://imengyu.top/assets/images/test/3.jpg" :round="false" :size="60" />
  </FlexRow>
</template>

随机背景颜色

通过 randomColor 属性设置随机背景颜色。

<template>
  <FlexRow :gap="20" wrap>
    <Avatar text="用户" :size="80" randomColor />
    <Avatar text="用户" :size="80" randomColor />
    <Avatar text="用户" :size="80" randomColor />
  </FlexRow>
</template>

设置默认头像

通过 defaultAvatar 属性设置默认头像，当 url 为空或加载失败时显示。

<template>
  <FlexRow :gap="20" wrap>
    <Avatar defaultAvatar="https://imengyu.top/assets/images/test/default-avatar.png" :size="80" />
    <Avatar url="无效的图片地址" defaultAvatar="https://imengyu.top/assets/images/test/default-avatar.png" :size="80" />
  </FlexRow>
</template>

API 参考

Avatar

头像组件。

Props

名称	说明	类型	必填	默认值
defaultAvatar	默认头像，在 url 为空或者加载失败时使用此头像	string	-	''
randomColor	随机背景颜色	boolean	-	false
url	头像的图标URL	string	-	''
background	背景颜色	string	-	'background.imageBox'
text	当未提供 url 时，支持在头像上显示文字，建议显示1-2个汉字	string	-	''
textColor	文字的颜色	string	-	'text.content'
textStyle	文字的样式	object	-	{}
innerStyle	头像的样式	object	-	{}
size	头像的大小	number	-	70
radius	头像圆角大小	number	-	0
round	头像是否是圆型，设置后 radius 无效	boolean	-	true

Events

名称	说明	参数
click	点击事件	$event

主题变量

名称	类型	默认值	说明
AvatarBackground	string	'background.imageBox'	头像背景颜色
AvatarSize	number	70	头像默认大小
AvatarRadius	number	0	头像默认圆角大小
AvatarRound	boolean	true	头像默认是否为圆形
AvatarRoundRadius	string	'50%'	圆形头像的圆角值
AvatarTextColor	string	'text.content'	文字颜色