# Avatar 头像 V1.1.0+
概述
Avatar 头像，用图标、图片或者字符的形式展示用户或事物信息。
# 支持平台
目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。
| 安卓系统版本 | 安卓uni-app | 安卓uniapp-x | iOS系统版本 | iOS uniapp | iOS uniapp-x | 小程序 | H5/Web |
|---|---|---|---|---|---|---|---|
| 5.0 | × | ✓ | 9.0 | × | × | × | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiAvatar from "@/components/firstui/fui-avatar/fui-avatar.uvue"
export default {
components:{
fuiAvatar
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 size 属性设置头像大小，text 属性设置显示文本，background 属性设置背景色。
<fui-avatar size="small" text="A"></fui-avatar>
<fui-avatar text="B"></fui-avatar>
<fui-avatar text="刘" background="#FFB703"></fui-avatar>
1
2
3
2
3
使用图片头像
通过 src 属性设置头像图片资源地址，设置src后，text 属性失效。
<fui-avatar size="small" src="/static/images/common/img_logo.png" shape="square"></fui-avatar>
1
自定义图标
text 或 src 属性不传值则不显示，可通过插槽自定义显示内容。
<fui-avatar>
<fui-icon name="my" color="#fff"></fui-icon>
</fui-avatar>
1
2
3
2
3
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 自定义内容展示 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| src | String | 头像图片资源地址 | - | - |
| errorSrc | String | 图片加载失败时默认图片资源地址，仅src传值时有效 | - | - |
| mode | String | 头像图片裁剪、缩放的模式 | scaleToFill | - |
| fadeShow | Boolean | 图片显示动画效果 | false | - |
| background | String | 头像背景色 | #D1D1D1 | - |
| size | String | 头像大小，可选值：small、middle、large，不设置width时生效 | middle | - |
| width | Number | 头像宽度，单位rpx，设置大于0的数值生效，自定义宽度后size失效 | 0 | - |
| height | Number | 默认等宽，设置图大于0的数值且设置了图片宽度生效 | 0 | - |
| shape | String | 指定头像的形状，可选值为 circle、square | circle | - |
| radius | Number | 头像圆角值，单位rpx，当设置大于等于0的数值时，shape失效 | -1 | - |
| text | String | 头像文本内容，未设置src时生效 | - | - |
| color | String | 头像文本颜色 | #fff | - |
| fontSize | Number | 头像文本字体大小，设置大于0的数值生效 | 0 | - |
| fontWeight | String | 头像文本字重 | bold | - |
| marginRight | Number | 头像margin-right值，单位rpx | 0 | - |
| marginBottom | Number | 头像margin-bottom值，单位rpx | 0 | - |
| index | Number | 在列表中的索引值 | 0 | - |
# Events
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| @onclick | (event: number) => void | 点击头像时触发 | number：index索引值 |
| @error | (event: number) => void | 图片加载失败时触发，当src传值时有效 | number：index索引值 |
Avatar 头像