Tui Plus Vapor

# t-avatar

Avatar 头像

t-avatar 组件介绍

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

t-avatar 平台兼容

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

t-avatar 基础用法

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

vue

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mlrt-15"
				title="Avatar 头像"
				sub-title="背景随机色文字头像,头像组,丰富主题样式"></t-card>
		<introduction title="头像形状">
			<view class="fl plr-15 faic">
				<t-avatar size="mini"
						  class="mr-15 r-100!"
						  :src="src"></t-avatar>
				<t-avatar size="small"
						  class="mr-15 r-100!"
						  :src="src"></t-avatar>
				<t-avatar size="medium"
						  class="mr-15 r-100!"
						  :src="src"></t-avatar>
				<t-avatar size="large"
						  class="mr-15 r-100!"
						  :src="src"></t-avatar>
			</view>
		</introduction>
		<introduction title="头像主题尺寸">
			<view class="fl plr-15 faic">
				<t-avatar size="mini"
						  class="mr-15"
						  :src="src"></t-avatar>
				<t-avatar size="small"
						  class="mr-15"
						  :src="src"></t-avatar>
				<t-avatar size="medium"
						  class="mr-15"
						  :src="src"></t-avatar>
				<t-avatar size="large"
						  class="mr-15"
						  :src="src"></t-avatar>
			</view>
		</introduction>
		<introduction title="图标头像">
			<view class="fl plr-15 faic">
				<t-avatar icon="starfill"
						  size="mini"
						  class="mr-15 r-100!"></t-avatar>
				<t-avatar icon="starfill"
						  size="small"
						  class="mr-15 r-100!"></t-avatar>
				<t-avatar icon="starfill"
						  size="medium"
						  class="mr-15 r-100!"></t-avatar>
				<t-avatar icon="starfill"
						  size="large"
						  class="mr-15 r-100!"></t-avatar>
			</view>
		</introduction>
		<introduction title="图标头像">
			<view class="fl plr-15 faic">
				<t-avatar icon="setting"
						  size="mini"
						  class="mr-15"></t-avatar>
				<t-avatar icon="starfill"
						  size="small"
						  class="mr-15"></t-avatar>
				<t-avatar icon="starfill"
						  size="medium"
						  class="mr-15"></t-avatar>
				<t-avatar icon="setting"
						  size="large"
						  class="mr-15"></t-avatar>
			</view>
		</introduction>
		<introduction title="文字头像">
			<view class="fl plr-15 faic">
				<t-avatar size="mini"
						  text="周"
						  class="mr-15"></t-avatar>
				<t-avatar size="small"
						  text="吴"
						  class="mr-15"></t-avatar>
				<t-avatar size="medium"
						  text="郑"
						  class="mr-15"></t-avatar>
				<t-avatar size="large"
						  text="王"
						  class="mr-15"></t-avatar>
			</view>
		</introduction>
		<introduction title="文字头像">
			<view class="fl plr-15 faic">
				<t-avatar size="mini"
						  text="周"
						  class="mrb-15 r-100!"></t-avatar>
				<t-avatar size="small"
						  text="吴"
						  class="mrb-15 r-100!"></t-avatar>
				<t-avatar size="medium"
						  text="郑"
						  class="mrb-15 r-100!"></t-avatar>
				<t-avatar size="large"
						  text="王"
						  class="mrb-15 r-100!"></t-avatar>
			</view>
		</introduction>
		<introduction title="堆叠">
			<t-avatar-group :maxCount="7"
							:list="urls">
				<template #default="{item,index}">
					<t-avatar :class="[(index as number)>0?'ml-n18':'','twhr-35!']"
							  :src="`${item}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twhr-35 bg-#f5f5f5 fc ml-n18">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
			<t-avatar-group :maxCount="7"
							:list="urls"
							class="mt-25">
				<template #default="{item,index}">
					<t-avatar :class="[(index as number)>0?'ml-n18':'','twhr-35!']"
							  :src="`${item}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twhr-35 fc ml-n35">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
		</introduction>
		<introduction title="平铺"
					  class="mt-15">
			<t-avatar-group :maxCount="5"
							:list="urls">
				<template #default="{item,index}">
					<t-avatar :class="['twhr-35! mr-10']"
							  :src="`${item}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twhr-35 bg-#f5f5f5 fc">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
			<t-avatar-group :maxCount="5"
							:list="urls"
							class="mt-25">
				<template #default="{item,index}">
					<t-avatar :class="['twh-35! mr-10','r-10!']"
							  :src="`${item}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twh-35 r-10 fc mr-10 bg-#f5f5f5">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
		</introduction>
		<introduction title="混合使用"
					  class="mt-30">
			<t-avatar-group :maxCount="5"
							:list="urls1">
				<template #default="{item,index}">
					<t-avatar class="mr-n30 r-100!"
							  v-if="`${(item as UTSJSONObject)['type']}`=='text'"
							  :text="`${(item as UTSJSONObject)['value']}`"></t-avatar>
					<t-avatar class="mr-n30 r-100!"
							  v-if="`${(item as UTSJSONObject)['type']}`=='icon'"
							  :icon="`${(item as UTSJSONObject)['value']}`"></t-avatar>
					<t-avatar class="mr-n30 r-100!"
							  v-if="`${(item as UTSJSONObject)['type']}`=='image'"
							  :src="`${(item as UTSJSONObject)['value']}`"></t-avatar>
				</template>
				<template #more="{count}">
					<view class="twhr-40 bg-#f5f5f5 fc r-100">
						<text class="c-red s-15 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-40 r-10 fc bg-#f5f5f5">
						<text class="c-red s-15 sfwb">+{{count}}</text>
					</view>
				</template>
			</t-avatar-group>
		</introduction>
	</view>
</template>
<script setup>
	const src = ref<string>('/static/image/avatar.jpeg')
	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: '王' },
		{ type: 'icon', value: 'rmb-circle' },
		{ type: 'text', value: '李' },
		{ type: 'image', value: '/static/image/avatar/4.jpg' },
	])
	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',
		'/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'
	])
</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>

t-avatar 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`	`''`

t-avatar Events

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

t-avatar Slots

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

尺寸说明

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

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

t-avatar 组件介绍 ​

t-avatar 平台兼容 ​

t-avatar 基础用法 ​

头像组使用 ​

t-avatar Props ​

t-avatar Events ​

t-avatar Slots ​

尺寸说明 ​