mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat: 头像占位图片支持
This commit is contained in:
zhangtao07
parent
f858f95bde
commit
ff94f7795a
@ -243,21 +243,22 @@ src、text 都支持变量，可以从上下文中动态获取图片或文字，
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| 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` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| 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` | | 图片地址 |
|
||||
| defaultAvatar | `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` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -81,6 +81,14 @@
|
||||
background-color: #f7f7f9;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: var(--Form-item-gap);
|
||||
|
||||
.cxd-Collapse-content {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.right::after {
|
||||
right: 12px;
|
||||
left: auto;
|
||||
|
||||
@ -159,6 +159,7 @@ export class AvatarPlugin extends BasePlugin {
|
||||
onChange: (value: any, origin: any, item: any, form: any) => {
|
||||
form.setValues({
|
||||
src: undefined,
|
||||
defaultAvatar: undefined,
|
||||
fit: 'cover',
|
||||
text: undefined,
|
||||
gap: 4,
|
||||
@ -182,7 +183,13 @@ export class AvatarPlugin extends BasePlugin {
|
||||
type: 'input-url'
|
||||
},
|
||||
name: 'src',
|
||||
label: '链接',
|
||||
label: '头像地址',
|
||||
visibleOn: 'data.showtype === "image"'
|
||||
}),
|
||||
// 占位图片
|
||||
getSchemaTpl('imageUrl', {
|
||||
name: 'defaultAvatar',
|
||||
label: '默认头像',
|
||||
visibleOn: 'data.showtype === "image"'
|
||||
}),
|
||||
{
|
||||
|
||||
@ -34,6 +34,11 @@ export interface AvatarSchema extends BaseSchema {
|
||||
*/
|
||||
src?: string;
|
||||
|
||||
/**
|
||||
* 默认头像
|
||||
*/
|
||||
defaultAvatar?: string;
|
||||
|
||||
/**
|
||||
* 图标
|
||||
*/
|
||||
@ -113,6 +118,7 @@ export class AvatarField extends React.Component<AvatarProps> {
|
||||
className,
|
||||
classnames: cx,
|
||||
src,
|
||||
defaultAvatar,
|
||||
icon = 'fa fa-user',
|
||||
fit,
|
||||
shape,
|
||||
@ -153,7 +159,7 @@ export class AvatarField extends React.Component<AvatarProps> {
|
||||
style={style}
|
||||
className={className}
|
||||
classnames={cx}
|
||||
src={src}
|
||||
src={src || defaultAvatar}
|
||||
icon={icon}
|
||||
fit={fit}
|
||||
shape={shape}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user