t-avatar

Avatar 头像

组件介绍

t-avatar 用于展示用户头像信息，支持图片头像、图标头像、文字头像三种形式，并提供多种尺寸和主题样式。文字头像支持随机背景色，可与 t-avatar-group 组件配合使用，实现头像组的堆叠、平铺等效果。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/avatar/avatar.uvue，通过 src、icon、text 属性分别展示图片、图标、文字头像。

vue

<template>
  <view class="fl plr-30 faic">
    <!-- 图片头像 -->
    <t-avatar size="mini" class="mr-30" :src="src"></t-avatar>
    <t-avatar size="small" class="mr-30" :src="src"></t-avatar>
    <t-avatar size="medium" class="mr-30" :src="src"></t-avatar>
    <t-avatar size="large" class="mr-30" :src="src"></t-avatar>
  </view>

  <view class="fl plr-30 faic mt-30">
    <!-- 图标头像 -->
    <t-avatar icon="star-fill" size="mini" class="mr-30"></t-avatar>
    <t-avatar icon="star-fill" size="small" class="mr-30"></t-avatar>
    <t-avatar icon="star-fill" size="medium" class="mr-30"></t-avatar>
    <t-avatar icon="star-fill" size="large" class="mr-30"></t-avatar>
  </view>

  <view class="fl plr-30 faic mt-30">
    <!-- 文字头像 -->
    <t-avatar size="mini" text="周" class="mr-30"></t-avatar>
    <t-avatar size="small" text="吴" class="mr-30"></t-avatar>
    <t-avatar size="medium" text="郑" class="mr-30"></t-avatar>
    <t-avatar size="large" text="王" class="mr-30"></t-avatar>
  </view>
</template>

<script setup>
const src = ref<string>('/static/image/avatar.jpeg')
</script>

头像组使用

配合 t-avatar-group 组件可以实现头像组的堆叠和平铺效果：

vue

<template>
  <!-- 堆叠效果 -->
  <t-avatar-group :maxCount="7" :list="urls">
    <template #default="{item,index}">
      <t-avatar :class="[(index as number)>0?'ml-n35':'','twhr-70!']" :src="`${item}`"></t-avatar>
    </template>
    <template #more="{count}">
      <view class="twhr-70 bg-#f5f5f5 fc ml-n35">
        <text class="c-red s-30 sfwb">+{{count}}</text>
      </view>
    </template>
  </t-avatar-group>

  <!-- 平铺效果 -->
  <t-avatar-group :maxCount="5" :list="urls" class="mt-50">
    <template #default="{item,index}">
      <t-avatar :class="['twhr-70! mr-20']" :src="`${item}`"></t-avatar>
    </template>
    <template #more="{count}">
      <view class="twhr-70 bg-#f5f5f5 fc">
        <text class="c-red s-30 sfwb">+{{count}}</text>
      </view>
    </template>
  </t-avatar-group>

  <!-- 混合类型 -->
  <t-avatar-group :maxCount="5" :list="urls1" class="mt-50">
    <template #default="{item,index}">
      <t-avatar class="mr-20" v-if="`${(item as UTSJSONObject)['type']}`=='text'" :text="`${(item as UTSJSONObject)['value']}`"></t-avatar>
      <t-avatar class="mr-20" v-if="`${(item as UTSJSONObject)['type']}`=='icon'" :icon="`${(item as UTSJSONObject)['value']}`"></t-avatar>
      <t-avatar class="mr-20" v-if="`${(item as UTSJSONObject)['type']}`=='image'" :src="`${(item as UTSJSONObject)['value']}`"></t-avatar>
    </template>
    <template #more="{count}">
      <view class="twh-70 r-20 fc bg-#f5f5f5">
        <text class="c-red s-30 sfwb">+{{count}}</text>
      </view>
    </template>
  </t-avatar-group>
</template>

<script setup>
const urls = ref<string[]>([
  '/static/image/avatar/1.jpg',
  '/static/image/avatar/2.jpg',
  '/static/image/avatar/3.jpg',
  '/static/image/avatar/4.jpg',
  '/static/image/avatar/5.jpg',
  '/static/image/avatar/6.jpg'
])

const urls1 = ref<UTSJSONObject[]>([
  { type: 'text', value: '张' },
  { type: 'icon', value: 'account-fill' },
  { type: 'image', value: '/static/image/avatar/1.jpg' },
  { type: 'text', value: '周' },
  { type: 'text', value: '王' }
])
</script>

Props

属性名	说明	类型	默认值
`path`	点击组件后跳转的页面路径；为空时仅响应事件	`string`	`''`
`hover`	是否启用点击效果	`boolean`	`false`
`type`	组件主题类型，可选 `info`、`primary`、`error`、`warning`、`success`	`string`	`''`
`disabled`	是否禁用	`boolean`	`false`
`effect`	组件显示主题，可选 `normal`、`dark`、`light`、`plain`	`string`	`'normal'`
`size`	组件尺寸，可选 `large`、`medium`、`small`、`mini`	`string`	`'medium'`
`src`	头像的图片地址	`string`	`''`
`mode`	图片裁剪、缩放的模式，可选 `scaleToFill`、`aspectFit`、`aspectFill`、`widthFix`、`heightFix`、`top`、`bottom`、`center`、`left`、`right`、`top left`、`top right`、`bottom left`、`bottom right`	`string`	`'scaleToFill'`
`icon`	字体图标字体的名称	`string`	`''`
`text`	文字头像的内容	`string`	`''`
`randombackgroundColor`	是否随机背景色	`boolean`	`true`
`avatarClass`	头像元素的样式类，对应外部类 `avatar-class`	`any`	`''`

Events

事件名	说明	回调参数
`click`	点击时触发	`UniPointerEvent`
`transitionend`	动画结束时触发	-
`initFinished`	组件初始化完成时触发，返回组件节点信息	`NodeInfo`
`touchstart`	触摸开始时触发	-
`touchend`	触摸结束时触发	-
`touchmove`	触摸移动时触发	-
`touchcancel`	触摸取消时触发	-

Slots

插槽名	说明
`default`	默认插槽，用于自定义头像内容

尺寸说明

组件提供了四种预设尺寸：

尺寸	宽高	文字大小
`mini`	40px	1em
`small`	60px	1.2em
`medium`	80px	1.4em
`large`	100px	1.6em

t-avatar ​

组件介绍 ​

平台兼容 ​

基础用法 ​

头像组使用 ​

Props ​

Events ​

Slots ​

尺寸说明 ​