uv-ui

# Avatar 头像

✈

组件名：uv-avatar

点击下载&安装 (opens new window)

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

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

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

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

<template>
	<view>
		<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff"></uv-avatar>
		<uv-avatar text="李"></uv-avatar>
	</view>
</template>

# 头像形状

shape参数指定头像的形状，取值circle为圆形，取值square为圆角方形，默认圆形

<template>
	<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff" shape="square"></uv-avatar>
</template>

# 图标头像

设置icon属性指定头像的图标，图标可参考icon组件

<template>
	<view>
		<uv-avatar icon="red-packet-fill" fontSize="22"></uv-avatar>
		<uv-avatar icon="star-fill" fontSize="22"></uv-avatar>
	</view>
</template>

# 文字头像（自动背景色）

设置randomBgColor属性开启头像的自动背景色

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

# 默认头像

如果头像加载失败，导致加载图片失败，将会显示一个默认的灰色头像

# 头像组

使用uv-avatar-group实现头像组

<template>
	<uv-avatar-group :urls="urls" size="35" gap="0.4"></uv-avatar-group>
</template>
<script>
	export default {
		data() {
			return {
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg'
				]
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Avatar Props

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

# Avatar Events

事件名 说明 回调参数
@click 头像被点击 index: 用户传递的标识符

# AvatarGroup Props

参数 说明 类型 默认值 可选值
urls 头像图片组 Array [] -
maxCount 最多展示的头像数量 String | Number 5 -
shape 头像形状 String circle circle | square
mode 图片裁剪模式 String aspectFill -
showMore 超出maxCount时是否显示查看更多的提示 Boolean true -
size 头像大小 String | Number 40 -
keyName 指定从数组的对象元素中读取哪个属性作为图片地址 String - -
gap 头像之间的遮挡比例（0.4代表遮挡40%） String | Number 0.5 -
extraValue 需额外显示的值，如设置则优先于内部的urls.length - maxCount值 String | Number - -

# AvatarGroup Events

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

← Skeleton 骨架屏 →