Avatar 头像

用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。

参考 TDesign Avatar 的图片、图标、文字、角标和头像组能力，适配 uni-app x 组件写法

演示

9:41

代码示例

<!-- 01 组件类型 -->
  <re-avatar class="demo-avatar-image" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" :imageProps="fitImageProps" customStyle="margin-right: 64rpx;" />
  <re-avatar class="demo-avatar-image-round" shape="round" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" :imageProps="fitImageProps" />
  <re-avatar class="demo-avatar-character" alt="A" customStyle="margin-right: 64rpx;" />
  <re-avatar class="demo-avatar-character-round" shape="round" alt="A" />
  <re-avatar class="demo-avatar-icon" icon="user" customStyle="margin-right: 64rpx;" />
  <re-avatar class="demo-avatar-icon-round" shape="round" icon="user" />
  <re-avatar class="demo-avatar-badge-dot" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" :imageProps="fitImageProps" :badgeProps="dotBadge" customStyle="margin-right: 64rpx;" />
  <re-avatar class="demo-avatar-badge-text" alt="A" :badgeProps="countBadgeEight" customStyle="margin-right: 64rpx;" />
  <re-avatar class="demo-avatar-badge-icon" icon="user" :badgeProps="countBadgeTwelve" />

<!-- 02 特殊类型 -->
  <re-avatar-group class="demo-avatar-group-exhibition" :max="5" collapseAvatar="+5">
  <re-avatar v-for="(pic, index) in pics" :key="'exhibition-' + index" :class="'demo-avatar-group-item-' + index" :image="pic" :imageProps="fitImageProps" />
  <re-avatar-group class="demo-avatar-group-action" cascading="right-up" :max="5" @collapsed-item-click="handleCollapsedClick">
  <re-avatar v-for="(pic, index) in pics" :key="'action-' + index" :class="'demo-avatar-action-item-' + index" :image="pic" :imageProps="fitImageProps" />

<!-- 03 组件尺寸 -->
  <re-avatar class="demo-avatar-size-large-image" size="large" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" :imageProps="fitImageProps" customStyle="margin-right: 64rpx;" />
  <re-avatar class="demo-avatar-size-large-text" size="large" alt="A" customStyle="margin-right: 64rpx;" />
  <re-avatar class="demo-avatar-size-large-icon" size="large" icon="user" />
  <re-avatar class="demo-avatar-size-medium-image" size="medium" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" :imageProps="fitImageProps" customStyle="margin-right: 96rpx;" />
  <re-avatar class="demo-avatar-size-medium-text" size="medium" alt="A" customStyle="margin-right: 96rpx;" />
  <re-avatar class="demo-avatar-size-medium-icon" size="medium" icon="user" />
  <re-avatar class="demo-avatar-size-small-image" size="small" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" :imageProps="fitImageProps" customStyle="margin-right: 112rpx;" />
  <re-avatar class="demo-avatar-size-small-text" size="small" alt="A" customStyle="margin-right: 112rpx;" />
  <re-avatar class="demo-avatar-size-small-icon" size="small" icon="user" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-avatar />。

API

Avatar Props

名称类型默认值描述必传
altstring""头像替换文本。图片加载失败时优先显示；无图片时可作为文字头像内容N
badgePropsUTSJSONObjectnull头像右上角提示信息，继承 re-badge 组件常用属性N
hideOnLoadFailedbooleanfalse图片加载失败时隐藏整个头像N
iconstring | UTSJSONObject""图标。支持字符串图标名或透传 re-icon 的对象配置N
imagestring""图片地址N
imagePropsUTSJSONObjectnull透传 image 的配置，当前支持 mode 和 style/customStyleN
shapestring""头像形状，可选值：circle / roundN
sizestring""尺寸，支持 small / medium / large 或具体尺寸值N
customStylestring""自定义样式，作用于头像外层包装元素N
groupCollapsebooleanfalse头像组内部折叠头像标识N
groupIndexnumber-1头像组内部展示索引N

Avatar Events

名称参数描述
error-错误时触发
click-点击时触发

Avatar Slots

名称描述
default默认插槽
badge-

AvatarGroup Props

名称类型默认值描述必传
cascadingstring"left-up"图片之间的层叠关系，可选值：left-up / right-upN
collapseAvatarstring""头像数量超出时折叠元素内容，默认显示 +NN
maxnumber0能够同时显示的最多头像数量N
shapestring"circle"头像形状，可选值：circle / roundN
sizestring"40px"头像尺寸，支持 small / medium / large 或具体尺寸值N
customStylestring""自定义样式N

AvatarGroup Events

名称参数描述
collapsed-item-click--

AvatarGroup Slots

名称描述
default默认插槽
Upload 上传
文件上传组件，支持图片预览、多选、大小限制和上传前钩子
AvatarCropper 头像裁剪
图片裁剪交互，用于头像裁剪，支持旋转、缩放