TuniaoUI

# Avatar 头像

当前组件可以使用图标、文字、图片的形式给用户展示数据。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ 兼容中 兼容中 兼容中 兼容中

# 基本使用

通过src、text、icon属性可以设置显示为图片、文职、图标的头像信息。

<tn-avatar text="图鸟"></tn-avatar>
<tn-avatar src="xxx.jpg"></tn-avatar>

# 设置头像的颜色

可以通过backgrundColor和fontColor来设置颜色信息。设置头像的颜色可以使用TuniaoUI内置样式中的颜色值进行设置。

设置颜色仅在设置为图标和文字时生效。

<tn-avatar backgroundColor="#01BEFF" fontColor="#080808" text="TN"></tn-avatar>
<tn-avatar backgroundColor="tn-bg-blue" fontColor="tn-color-white" icon="mail"></tn-avatar>

# 设置尺寸

可以通过设置tn-avatar组件的size（可选值为sm(小尺寸),lg(大尺寸),xl(加大尺寸)），默认值为空。

<tn-avatar size="sm" text="小尺寸头像"></tn-avatar>

# 设置头像的形状

可以通过设置tn-avatar组件的shape（可选值为circle(圆形，默认值),square(圆角方形)）。

<tn-avatar shape="square" text="TN"></tn-avatar>

# 设置头像右上角角标

设置badge属性为true和设置badgeIcon或者badgeText不为空值即可以让头像显示右上角的角标。

  • 通过设置badgeIcon设置角标显示为图标。
  • 设置badgeText设置角标显示为文字。
<tn-avatar :badge="true" badgeText="12"></tn-avatar>

# 设置头像组

设置头像组可以使用tn-avatar-group组件，并且传入lists属性即可，lists传入以下对象属性可以让其显示对应的头像信息：

{
    src: 'https://demo.com/avatar/xiaomai1.jpg', // 显示为图片
    text: 'TN', // 显示为文字
    icon: 'logo-tuniao', // 显示为图标
}

<tn-avatar-group :lists="groupList"></tn-avatar-group>

data() {
  return {
	{src: 'https://demo.com/avatar/xiaomai1.jpg'}, // 显示为图片
    {text: 'TN'}, // 显示为文字
	{icon: 'logo-tuniao'}, // 显示为图标
  }
}

# API

# Avatar Props

属性名 说明 类型 默认值 可选值
index 用于区分多个头像的点击事件 String|Number 0 -
backgroundColor 背景颜色 String #E6E6E6 颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontColor 字体颜色 String #FFFFFF 颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontSize 字体大小 Number 28 -
fontUnit 字体大小的单位 String rpx -
size 头像尺寸 String - sm/lg/xl
shape 头像的形状 String circle circle(圆形)、square(圆角方形)
src 图片地址，当设置了文字和图标后当前属性会失效 String - 本地图片相对路径、绝对路径、网络图片地址
text 头像显示文字的内容，默认级别比图片高 String - -
icon 头像显示图标的名称，名称为TuniaoUI内置的图标 String - -
border 显示边框 Boolean false true
borderColor 边框颜色，border为true时生效 String rgba(0, 0, 0, 0.1) -
borderSize 边框的大小，border为true时生效，单位rpx Number 2 -
imgMode 当设置了头像显示图片时生效，设置图片的裁剪模式，具体可以参考uni-app图片设置的mode参数 (opens new window) String aspectFill -
badge 显示右上角角标 Boolean false true
badgeSize 当设置badge后生效，设置角标的大小，单位为rpx Number 28 -
badgeBgColor 当设置badge后生效，设置角标的背景颜色 String #AAAAAA -
badgeColor 当设置badge后生效，设置角标的字体颜色 String #FFFFFF -
badgeIcon 当设置badge后生效，设置角标的的图标 String - -
badgeText 当设置badge后生效，设置角标的文字内容 String - -
badgePosition 当设置badge后生效，设置角标的位置，格式为[top, right] Array [0,0] -

# Avatar Slots

none

# Avatar Event

事件名称 说明 回调参数
click 头像点击事件 index

# AvatarGroup Props

属性名 说明 类型 默认值 可选值
lists 头像组，头像内参数说明可以查看上面说明 Array [] -
size 头像尺寸 String - sm/lg/xl
shape 头像的形状 String circle circle(圆形)、square(圆角方形)
imgMode 当设置了头像显示图片时生效，设置图片的裁剪模式，具体可以参考uni-app图片设置的mode参数 (opens new window) String aspectFill -

← Swiper 轮播图 →