# Avatar 头像
概述
Avatar 头像，用图标、图片或者字符的形式展示用户或事物信息。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiAvatar from "@/components/firstui/fui-avatar/fui-avatar.vue"
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 src="/static/images/common/img_logo.png"></fui-avatar>
1
自定义图标
text 或 src 属性不传值则不显示，可通过插槽自定义显示内容。
<fui-avatar>
<fui-icon name="my-fill" color="#fff"></fui-icon>
</fui-avatar>
1
2
3
2
3
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 自定义内容展示 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| src | String | 头像图片资源地址 | - | - |
| errorSrc V1.8.0+ | String | 图片加载失败时默认图片资源地址，仅src传值时有效 | - | - |
| mode | String | 头像图片裁剪、缩放的模式 | scaleToFill | nvue端如果设置为widthFix，若图片不是正方形可能导致设置圆角失效 |
| lazyLoad | Boolean | 图片懒加载。只针对page与scroll-view下的image有效 | true | 微信小程序、百度小程序、字节跳动小程序 |
| webp | Boolean | 默认不解析 webP 格式，只支持网络资源 | false | 微信小程序2.9.0 |
| background | String | 头像背景色 | #D1D1D1 | - |
| size | String | 头像大小，可选值：small、middle、large，不设置width时生效 | middle | - |
| width | Number, String | 头像宽度，单位rpx，设置大于0的数值生效，自定义宽度后size失效 | 0 | - |
| height | Number, String | 默认等宽，设置图大于0的数值且设置了图片宽度生效 | 0 | - |
| shape | String | 指定头像的形状，可选值为 circle、square | circle | - |
| radius | Number, String | 头像圆角值，单位rpx，当设置大于等于0的数值时，shape失效 | -1 | - |
| text | String | 头像文本内容，未设置src时生效 | - | - |
| color | String | 头像文本颜色 | #fff | - |
| fontSize | Number, String | 头像文本字体大小，设置大于0的数值生效 | 0 | - |
| fontWeight | Number, String | 头像文本字重 | 600 | - |
| marginRight | Number, String | 头像margin-right值，单位rpx | 0 | - |
| marginBottom | Number, String | 头像margin-bottom值，单位rpx | 0 | - |
| block V1.9.8+ | Boolean | 是否设置为块状元素 | false | Nvue端默认为块状元素 |
| index | Number | 在列表中的索引值 | 0 | - |
| params | Number, String | 其他参数 | 0 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击头像时触发 | { index:索引值 params：其他参数 } |
| @error V1.8.0+ | 图片加载失败时触发，当src传值时有效 | { index:索引值 params：其他参数 } |
Avatar 头像