mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:39:53 +08:00
2032de2ad7
* fix:inputImage 裁剪模式可配置可旋转,但是功能无效 * feat:组件头像avatar * feat:组件头像avatar完善 * feat:组件头像avatar根据评审完善 * feat:组件头像avatar根据评审完善 * feat:组件头像avatar根据评审完善 Co-authored-by: sqzhou <zhoushengqiang01@baidu.com>
5.9 KiB
5.9 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Avatar 头像 | 0 | ⚙ 组件 | Avatar 头像 | 27 |
用来显示用户头像
基本使用
{
"type": "avatar",
"src": "https://suda.cdn.bcebos.com/images/amis/ai-fake-face.jpg"
}
文字
{
"type": "avatar",
"text": "AM"
}
图标
通过 icon 设置图标
{
"type": "avatar",
"icon": "fa fa-user"
}
如果同时存在 src、text 和 icon,会优先用 src、接着 text、最后 icon
动态图片或文字
src、text 都支持变量,可以从上下文中动态获取图片或文字,下面的例子中:
- 第一个获取到了,显示正常
- 第二个没获取到,因此降级为显示 icon
- 第三个图片没获取到,由于 text 优先级比 icon 高,所以显示 text
{
"data": {
"myAvatar": "https://suda.cdn.bcebos.com/images/amis/ai-fake-face.jpg"
},
"type": "page",
"body": [
{
"type": "avatar",
"icon": "fa fa-user",
"src": "$myAvatar"
},
{
"type": "avatar",
"icon": "fa fa-user",
"src": "$other"
},
{
"type": "avatar",
"src": "$other",
"icon": "fa fa-user",
"text": "avatar"
}
]
}
方形和圆角形
可以通过 shape 改成方形或圆角形
[
{
"type": "avatar",
"shape": "square",
"text": "AM"
},
{
"type": "avatar",
"shape": "rounded",
"text": "AM",
"style": {
"marginLeft": "10px"
}
}
]
大小
通过 size 可以控制头像的大小
[
{
"type": "avatar",
"size": 'large',
"icon": "fa fa-user"
},
{
"type": "avatar",
"size": 'default',
"icon": "fa fa-user"
},
{
"type": "avatar",
"size": 'small',
"icon": "fa fa-user"
},
{
"type": "avatar",
"size": 60,
"src": "https://suda.cdn.bcebos.com/images/amis/ai-fake-face.jpg"
},
{
"type": "avatar",
"src": "https://suda.cdn.bcebos.com/images/amis/ai-fake-face.jpg"
},
{
"type": "avatar",
"size": 20,
"src": "https://suda.cdn.bcebos.com/images/amis/ai-fake-face.jpg"
},
]
控制字符类型距离左右两侧边界单位像素
通过 gap 可以控制字符类型距离左右两侧边界单位像素
[
{
"type": "avatar",
"text": 'ejson',
"gap": 2
},
{
"type": "avatar",
"text": "ejson",
"gap": 7
}
]
图片拉伸方式
通过 fit
可以控制图片拉伸方式,默认是 'cover'
[
{
"type": "avatar",
"fit": "cover",
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
},
{
"type": "avatar",
"fit": "fill",
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
},
{
"type": "avatar",
"fit": "contain",
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
},
{
"type": "avatar",
"fit": "none",
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
},
{
"type": "avatar",
"fit": "scale-down",
"src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
}
]
控制图片是否允许拖动
通过 draggable 可以控制图片是否允许拖动
[
{
"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 置换
如果同时存在 text 和 icon,会优先用 text、接着 icon
{
"type": "avatar",
"src": "empty",
"text": "avatar",
"onError": "return true;"
},
样式
可以通过 style 来控制背景及文字颜色
{
"type": "avatar",
"text": "AM",
"style": {
"background": "#DB3E35",
"color": "#FFFFFF"
}
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
className | string |
外层 dom 的类名 | |
style | object |
外层 dom 的样式 | |
fit | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' |
'cover' |
具体细节可以参考 MDN 文档 |
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 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意:图片加载失败,不包括$获取数据为空情况 |