2021-03-22 15:27:02 +08:00
|
|
|
|
---
|
|
|
|
|
|
title: Avatar 头像
|
|
|
|
|
|
description:
|
|
|
|
|
|
type: 0
|
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
|
menuName: Avatar 头像
|
|
|
|
|
|
icon:
|
|
|
|
|
|
order: 27
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
用来显示用户头像
|
|
|
|
|
|
|
|
|
|
|
|
## 基本使用
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
2023-07-21 13:33:23 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 文字
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"text": "AM"
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 图标
|
|
|
|
|
|
|
|
|
|
|
|
通过 icon 设置图标
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"icon": "fa fa-user"
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
> 如果同时存在 src、text 和 icon，会优先用 src、接着 text、最后 icon
|
|
|
|
|
|
|
|
|
|
|
|
## 动态图片或文字
|
|
|
|
|
|
|
2021-12-28 16:32:11 +08:00
|
|
|
|
src、text 都支持变量，可以从上下文中动态获取图片或文字，下面的例子中：
|
2023-07-21 13:33:23 +08:00
|
|
|
|
|
2021-12-28 16:32:11 +08:00
|
|
|
|
- 第一个获取到了，显示正常
|
|
|
|
|
|
- 第二个没获取到，因此降级为显示 icon
|
|
|
|
|
|
- 第三个图片没获取到，由于 text 优先级比 icon 高，所以显示 text
|
2021-03-22 15:27:02 +08:00
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
|
{
|
|
|
|
|
|
"data": {
|
2023-07-21 13:33:23 +08:00
|
|
|
|
"myAvatar": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
},
|
|
|
|
|
|
"type": "page",
|
|
|
|
|
|
"body": [
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"icon": "fa fa-user",
|
|
|
|
|
|
"src": "$myAvatar"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"icon": "fa fa-user",
|
|
|
|
|
|
"src": "$other"
|
2021-12-28 16:32:11 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"src": "$other",
|
|
|
|
|
|
"icon": "fa fa-user",
|
|
|
|
|
|
"text": "avatar"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 方形和圆角形
|
|
|
|
|
|
|
|
|
|
|
|
可以通过 shape 改成方形或圆角形
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"shape": "square",
|
|
|
|
|
|
"text": "AM"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"shape": "rounded",
|
|
|
|
|
|
"text": "AM",
|
|
|
|
|
|
"style": {
|
|
|
|
|
|
"marginLeft": "10px"
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 大小
|
|
|
|
|
|
|
|
|
|
|
|
通过 size 可以控制头像的大小
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
2021-12-28 16:32:11 +08:00
|
|
|
|
"size": 'large',
|
|
|
|
|
|
"icon": "fa fa-user"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"size": 'default',
|
|
|
|
|
|
"icon": "fa fa-user"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"size": 'small',
|
|
|
|
|
|
"icon": "fa fa-user"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"size": 60,
|
2023-07-21 13:33:23 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
|
2021-12-28 16:32:11 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
2023-07-21 13:33:23 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
|
2021-12-28 16:32:11 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"size": 20,
|
2023-07-21 13:33:23 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
|
2021-12-28 16:32:11 +08:00
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 控制字符类型距离左右两侧边界单位像素
|
|
|
|
|
|
|
|
|
|
|
|
通过 gap 可以控制字符类型距离左右两侧边界单位像素
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"text": 'ejson',
|
|
|
|
|
|
"gap": 2
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"text": "ejson",
|
|
|
|
|
|
"gap": 7
|
2021-03-22 15:27:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 图片拉伸方式
|
|
|
|
|
|
|
2021-12-28 16:32:11 +08:00
|
|
|
|
通过 `fit` 可以控制图片拉伸方式，默认是 `'cover'`
|
2021-03-22 15:27:02 +08:00
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"fit": "cover",
|
2021-04-03 00:10:19 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"fit": "fill",
|
2021-04-03 00:10:19 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"fit": "contain",
|
2021-04-03 00:10:19 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"fit": "none",
|
2021-04-03 00:10:19 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"fit": "scale-down",
|
2021-04-03 00:10:19 +08:00
|
|
|
|
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
|
2021-03-22 15:27:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-12-28 16:32:11 +08:00
|
|
|
|
## 控制图片是否允许拖动
|
|
|
|
|
|
|
|
|
|
|
|
通过 draggable 可以控制图片是否允许拖动
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"fit": "cover",
|
|
|
|
|
|
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg",
|
|
|
|
|
|
"draggable": false
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"fit": "cover",
|
|
|
|
|
|
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg",
|
|
|
|
|
|
"draggable": true
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 图片加载失败后，通过 onError 控制是否进行 text、icon 置换
|
2023-07-21 13:33:23 +08:00
|
|
|
|
|
2021-12-28 16:32:11 +08:00
|
|
|
|
> 如果同时存在 text 和 icon，会优先用 text、接着 icon
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"src": "empty",
|
|
|
|
|
|
"text": "avatar",
|
|
|
|
|
|
"onError": "return true;"
|
|
|
|
|
|
},
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-03-22 15:27:02 +08:00
|
|
|
|
## 样式
|
|
|
|
|
|
|
|
|
|
|
|
可以通过 style 来控制背景及文字颜色
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "avatar",
|
|
|
|
|
|
"text": "AM",
|
|
|
|
|
|
"style": {
|
|
|
|
|
|
"background": "#DB3E35",
|
|
|
|
|
|
"color": "#FFFFFF"
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
|
2023-07-21 13:33:23 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
|
| ----------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
|
|
|
|
| className | `string` | | 外层 dom 的类名 |
|
|
|
|
|
|
| style | `object` | | 外层 dom 的样式 |
|
|
|
|
|
|
| fit | `'contain'` \| `'cover'` \| `'fill'` \| `'none'` \| `'scale-down'` | `'cover'` | 具体细节可以参考 MDN [文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) |
|
|
|
|
|
|
| src | `string` | | 图片地址 |
|
|
|
|
|
|
| text | `string` | | 文字 |
|
|
|
|
|
|
| icon | `string` | `'fa fa-user'` | 图标 |
|
|
|
|
|
|
| shape | `'circle'` \| `'square'` \| `'rounded'` | `'circle'` | 形状，有三种 `'circle'` （圆形）、`'square'`（正方形）、`'rounded'`（圆角） |
|
|
|
|
|
|
| size | `number` \| `'default'` \| `'normal'` \| `'small'` | `'default'` | `'default' \| 'normal' \| 'small'`三种字符串类型代表不同大小（分别是 48、40、32），也可以直接数字表示 |
|
|
|
|
|
|
| gap | `number` | 4 | 控制字符类型距离左右两侧边界单位像素 |
|
|
|
|
|
|
| alt | `number` | | 图像无法显示时的替代文本 |
|
|
|
|
|
|
| draggable | `boolean` | | 图片是否允许拖动 |
|
|
|
|
|
|
| crossOrigin | `'anonymous'` \| `'use-credentials'` \| `''` | | 图片的 `CORS` 属性设置 |
|
|
|
|
|
|
| onError | `string` | | 图片加载失败的字符串，这个字符串是一个 New Function 内部执行的字符串，参数是 event（使用 event.nativeEvent 获取原生 dom 事件），这个字符串需要返回 boolean 值。设置 `"return ture;"` 会在图片加载失败后，使用 `text` 或者 `icon` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 |
|
