本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。

基本使用

通过 src 指定头像的路径即可简单使用，如果传递了 text 参数，text 将会优先起作用。

注意：请保证传递给 src 的是绝对地址，而不是相对地址。因为传入 avatar 组件的相对地址是相对于组件的，而不是父组件（页面），所以相对地址可能会出错。

<template>
  <view>
    <un-avatar :src="src"></un-avatar>
    <un-avatar :text="text"></un-avatar>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const src = ref("http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg")
const text = ref("无头像")
</script>

头像形状

通过 shape 参数指定头像的形状：

• circle：圆形（默认）
• square：圆角方形

<template>
  <un-avatar :src="src" shape="square"></un-avatar>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const src = ref("http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg")
</script>

图标头像

通过 icon 参数指定头像的图标，图标可参考 icon 组件：

<template>
  <view class="u-demo-block__content">
    <view class="u-avatar-item">
      <un-avatar icon="red-packet-fill" fontSize="22"></un-avatar>
    </view>
    <view class="u-avatar-item">
      <un-avatar icon="star-fill" fontSize="22"></un-avatar>
    </view>
  </view>
</template>

<style lang="scss">
.u-demo-block__content {
  display: flex;
  align-items: center;
}

.u-avatar-item {
  margin-right: 30px;
}
</style>

文字头像（自动背景色）

通过 randomBgColor 参数开启头像的自动背景色：

<template>
  <un-avatar text="北" fontSize="18" randomBgColor></un-avatar>
</template>

头像组

使用 un-avatar-group 实现头像组：

<template>
  <un-avatar-group size="35" gap="0.4">
    <un-avatar src="https://cdn.uviewui.com/uview/album/1.jpg"></un-avatar>
    <un-avatar src="https://cdn.uviewui.com/uview/album/2.jpg"></un-avatar>
    <un-avatar src="https://cdn.uviewui.com/uview/album/3.jpg"></un-avatar>
    <un-avatar src="https://cdn.uviewui.com/uview/album/4.jpg"></un-avatar>
    <un-avatar src="https://cdn.uviewui.com/uview/album/7.jpg"></un-avatar>
    <un-avatar src="https://cdn.uviewui.com/uview/album/6.jpg"></un-avatar>
    <un-avatar src="https://cdn.uviewui.com/uview/album/5.jpg"></un-avatar>
  </un-avatar-group>
  
  <view style="margin-top: 20px;">
    <un-avatar-group maxCount="5" gap="0.3" extraValue="更多" :extraStyle="{ fontSize:'12px' }">
      <un-avatar src="https://cdn.uviewui.com/uview/album/1.jpg"></un-avatar>
      <un-avatar src="https://cdn.uviewui.com/uview/album/2.jpg"></un-avatar>
      <un-avatar src="https://cdn.uviewui.com/uview/album/3.jpg"></un-avatar>
      <un-avatar src="https://cdn.uviewui.com/uview/album/4.jpg"></un-avatar>
      <un-avatar src="https://cdn.uviewui.com/uview/album/7.jpg"></un-avatar>
      <un-avatar src="https://cdn.uviewui.com/uview/album/6.jpg"></un-avatar>
      <un-avatar src="https://cdn.uviewui.com/uview/album/5.jpg"></un-avatar>
    </un-avatar-group>
  </view>
</template>

API

Avatar Props

参数	说明	类型	默认值
src	头像路径，如加载失败，将会显示默认头像（不能为相对路径）	string	-
shape	头像形状	Enum	circle
size	头像尺寸，可以为指定字符串（large, default, mini），或者数值	string | number	40
mode	头像图片的裁剪类型，与 uni 的 image 组件的 mode 参数一致，如效果达不到需求，可尝试传 widthFix 值	string	scaleToFill
text	用文字替代图片，级别优先于 src	string	-
bgColor	背景颜色，一般显示文字时用	string	#c0c4cc
color	文字颜色	string	#ffffff
fontSize	文字大小	string | number	18
icon	显示的图标	string	-
mpAvatar	显示小程序头像，只对百度，微信，QQ 小程序有效	boolean	false
randomBgColor	是否使用随机背景色	boolean	false
defaultUrl	加载失败的默认头像（组件有内置默认图片）	string	-
colorIndex	如果配置了 randomBgColor 为 true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值 0-19 之间	string | number	-
name	组件标识符	string	-

Avatar Events

事件名	说明	回调参数
click	头像被点击	Function

AvatarGroup Props

参数	说明	类型	默认值
maxCount	最多展示的头像数量	string | number	5
showMore	超出 maxCount 时是否显示查看更多的提示	boolean	true
gap	头像之间的遮挡比例（0.4 代表遮挡 40%）	string | number	0.5
extraValue	需额外显示的值，如设置则优先于内部的计算值	string | number	-
extraStyle	额外的样式	string | object	-

AvatarGroup Events

事件名	说明	回调参数
showMore	头像组更多点击	Function

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-avatar-bg-color	$bg-color	头像背景颜色
$un-avatar-radius-circle	$radius-circle	圆形头像圆角
$un-avatar-radius-base	$radius-base	方形头像圆角
$un-avatar-more-bg-color	rgba(0, 0, 0, 0.3)	头像组更多信息背景色
$un-avatar-more-text-color	$text-color-inverted	头像组更多信息文字颜色
$un-avatar-more-text-font-size	$text-base	头像组更多信息文字大小