mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat:image和images增加enlargeWithImages,用于关闭表格中图片放大模式下图片集的显示
This commit is contained in:
lvxiaojiao
parent
069d34d4bd
commit
b6d05924cf
@ -1454,7 +1454,6 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |
|
||||
| change | `event.data: object` 当前表单数据 | 表单值变化时触发 |
|
||||
| formItemValidateSucc | `event.data: object` 当前表单数据 | 表单项校验成功时触发 |
|
||||
|
||||
@ -141,6 +141,97 @@ order: 52
|
||||
}
|
||||
```
|
||||
|
||||
在列表中，图片组件的放大模式下默认展示所有行的图片信息，设置`"enlargeWithGallary": true`效果相同。
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"imageList": [
|
||||
{
|
||||
"name": "amis",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "amis",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "tom",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "jack",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"source": "${imageList}",
|
||||
"syncLocation": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "name",
|
||||
"label": "名称"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "image_url",
|
||||
"label": "图片",
|
||||
"enlargeAble": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
在列表中，图片组件配置`"enlargeWithGallary": false`可以关闭放大模式下图片集列表的展示。
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"imageList": [
|
||||
{
|
||||
"name": "amis",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "amis",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "tom",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "jack",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"source": "${imageList}",
|
||||
"syncLocation": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "name",
|
||||
"label": "名称"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "image_url",
|
||||
"label": "图片",
|
||||
"enlargeAble": true,
|
||||
"enlargeWithGallary": false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
可以配置`originalSrc`，来指定原图资源地址，作为放大预览的图片地址
|
||||
|
||||
```schema
|
||||
@ -342,30 +433,31 @@ List 的内容、Card 卡片的内容配置同上
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| -------------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- | ------- |
|
||||
| type | `string` | | 如果在 Table、Card 和 List 中，为`"image"`；在 Form 中用作静态展示，为`"static-image"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| innerClassName | `string` | | 组件内层 CSS 类名 |
|
||||
| imageClassName | `string` | | 图片 CSS 类名 |
|
||||
| thumbClassName | `string` | | 图片缩率图 CSS 类名 |
|
||||
| height | `string` | | 图片缩率高度 |
|
||||
| width | `string` | | 图片缩率宽度 |
|
||||
| title | `string` | | 标题 |
|
||||
| imageCaption | `string` | | 描述 |
|
||||
| placeholder | `string` | | 占位文本 |
|
||||
| defaultImage | `string` | | 无数据时显示的图片 |
|
||||
| src | `string` | | 缩略图地址 |
|
||||
| href | [模板](../../docs/concepts/template) | | 外部链接地址 |
|
||||
| originalSrc | `string` | | 原图地址 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| enlargeTitle | `string` | | 放大预览的标题 |
|
||||
| enlargeCaption | `string` | | 放大预览的描述 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 |
|
||||
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
|
||||
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------ | ------------------------------------ | --------- | --------------------------------------------------------------------------------------------- | ------- |
|
||||
| type | `string` | | 如果在 Table、Card 和 List 中，为`"image"`；在 Form 中用作静态展示，为`"static-image"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| innerClassName | `string` | | 组件内层 CSS 类名 |
|
||||
| imageClassName | `string` | | 图片 CSS 类名 |
|
||||
| thumbClassName | `string` | | 图片缩率图 CSS 类名 |
|
||||
| height | `string` | | 图片缩率高度 |
|
||||
| width | `string` | | 图片缩率宽度 |
|
||||
| title | `string` | | 标题 |
|
||||
| imageCaption | `string` | | 描述 |
|
||||
| placeholder | `string` | | 占位文本 |
|
||||
| defaultImage | `string` | | 无数据时显示的图片 |
|
||||
| src | `string` | | 缩略图地址 |
|
||||
| href | [模板](../../docs/concepts/template) | | 外部链接地址 |
|
||||
| originalSrc | `string` | | 原图地址 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| enlargeTitle | `string` | | 放大预览的标题 |
|
||||
| enlargeCaption | `string` | | 放大预览的描述 |
|
||||
| enlargeWithGallary | `string` | `true` | 在表格中，图片的放大功能会默认展示所有图片信息，设置为`false`将关闭放大模式下图片集列表的展示 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 |
|
||||
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
|
||||
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
|
||||
|
||||
#### ImageAction
|
||||
|
||||
|
||||
@ -370,6 +370,54 @@ Array<{
|
||||
}
|
||||
```
|
||||
|
||||
图片组件配置`"enlargeWithGallary": false`可以关闭放大模式下图片集列表的展示，表格中亦是如此。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"images": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片1",
|
||||
"description": "图片1的描述"
|
||||
},
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片2",
|
||||
"description": "图片2的描述"
|
||||
},
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片3",
|
||||
"description": "图片3的描述"
|
||||
},
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片4",
|
||||
"description": "图片4的描述"
|
||||
},
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片5",
|
||||
"description": "图片5的描述"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "images",
|
||||
"source": "${images}",
|
||||
"enlargeAble": true,
|
||||
"enlargeWithGallary": false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 用作 Field 时
|
||||
|
||||
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量
|
||||
@ -422,13 +470,126 @@ Array<{
|
||||
{
|
||||
"name": "images",
|
||||
"label": "颜色",
|
||||
"type": "images"
|
||||
"type": "images",
|
||||
"enlargeAble": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
List 的内容、Card 卡片的内容配置同上
|
||||
Table 中图片组件配置`"enlargeWithGallary": true`可以在放大模式下预览列表中的所有图片集。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "table",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
"id": "1",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "Id"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "images",
|
||||
"label": "颜色",
|
||||
"type": "images",
|
||||
"enlargeAble": true,
|
||||
"enlargeWithGallary": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Table 中图片组件配置`"enlargeWithGallary": false`可以关闭放大模式下图片集列表的展示。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "table",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
"id": "1",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "Id"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "images",
|
||||
"label": "颜色",
|
||||
"type": "images",
|
||||
"enlargeAble": true,
|
||||
"enlargeWithGallary": false
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
List 的内容、Card 卡片的内容配置同上。
|
||||
|
||||
### Form 中关联数据静态展示
|
||||
|
||||
@ -503,18 +664,19 @@ List 的内容、Card 卡片的内容配置同上
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| -------------- | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- | ------- |
|
||||
| type | `string` | `images` | 如果在 Table、Card 和 List 中，为`"images"`；在 Form 中用作静态展示，为`"static-images"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| defaultImage | `string` | | 默认展示图片 |
|
||||
| value | `string`或`Array<string>`或`Array<object>` | | 图片数组 |
|
||||
| source | `string` | | 数据源 |
|
||||
| delimiter | `string` | `,` | 分隔符，当 value 为字符串时，用该值进行分隔拆分 |
|
||||
| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 |
|
||||
| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
|
||||
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------ | ------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| type | `string` | `images` | 如果在 Table、Card 和 List 中，为`"images"`；在 Form 中用作静态展示，为`"static-images"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| defaultImage | `string` | | 默认展示图片 |
|
||||
| value | `string`或`Array<string>`或`Array<object>` | | 图片数组 |
|
||||
| source | `string` | | 数据源 |
|
||||
| delimiter | `string` | `,` | 分隔符，当 value 为字符串时，用该值进行分隔拆分 |
|
||||
| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 |
|
||||
| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| enlargeWithGallary | `string` | | 默认在放大功能展示图片集的所有图片信息；表格中使用时，设置为`true`将展示所有行的图片信息；设置为`false`将关闭放大模式下图片集列表的展示 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
|
||||
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
|
||||
|
||||
@ -51,6 +51,8 @@ export interface ImageGalleryState {
|
||||
rotate: number;
|
||||
/** 是否开启操作栏 */
|
||||
showToolbar?: boolean;
|
||||
/** 是否显示底部图片集 */
|
||||
enlargeWithGallary?: boolean;
|
||||
/** 放大详情图类名 */
|
||||
imageGallaryClassName?: string;
|
||||
/** 工具栏配置 */
|
||||
@ -142,6 +144,7 @@ export class ImageGallery extends React.Component<
|
||||
showToolbar?: boolean;
|
||||
imageGallaryClassName?: string;
|
||||
toolbarActions?: ImageAction[];
|
||||
enlargeWithGallary?: boolean;
|
||||
}) {
|
||||
const {actions} = this.props;
|
||||
const validActionKeys = Object.values(ImageActionKey);
|
||||
@ -152,6 +155,7 @@ export class ImageGallery extends React.Component<
|
||||
index: info.index || 0,
|
||||
/* children组件可以控制工具栏的展示 */
|
||||
showToolbar: !!info.showToolbar,
|
||||
enlargeWithGallary: info.enlargeWithGallary,
|
||||
imageGallaryClassName: info.imageGallaryClassName,
|
||||
/** 外部传入合法key值的actions才会生效 */
|
||||
actions: Array.isArray(info.toolbarActions)
|
||||
@ -277,6 +281,7 @@ export class ImageGallery extends React.Component<
|
||||
rotate,
|
||||
scale,
|
||||
showToolbar,
|
||||
enlargeWithGallary,
|
||||
actions,
|
||||
imageGallaryClassName
|
||||
} = this.state;
|
||||
@ -322,7 +327,7 @@ export class ImageGallery extends React.Component<
|
||||
? this.renderToolbar(actions)
|
||||
: null}
|
||||
|
||||
{items.length > 1 ? (
|
||||
{items.length > 1 && enlargeWithGallary !== false ? (
|
||||
<>
|
||||
<a
|
||||
className={cx(
|
||||
@ -348,7 +353,7 @@ export class ImageGallery extends React.Component<
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{items.length > 1 ? (
|
||||
{items.length > 1 && enlargeWithGallary !== false ? (
|
||||
<div className={cx('ImageGallery-footer')}>
|
||||
<a className={cx('ImageGallery-prevList is-disabled')}>
|
||||
<Icon icon="prev" className="icon" />
|
||||
|
||||
@ -65,6 +65,11 @@ export interface ImageSchema extends BaseSchema {
|
||||
*/
|
||||
enlargeAble?: boolean;
|
||||
|
||||
/**
|
||||
* 放大时是否显示图片集
|
||||
*/
|
||||
enlargeWithGallary?: boolean;
|
||||
|
||||
/**
|
||||
* 是否显示尺寸。
|
||||
*/
|
||||
@ -365,6 +370,7 @@ export interface ImageFieldProps extends RendererProps {
|
||||
thumbRatio: '1:1' | '4:3' | '16:9';
|
||||
originalSrc?: string; // 原图
|
||||
enlargeAble?: boolean;
|
||||
enlargeWithGallary?: boolean;
|
||||
showToolbar?: boolean;
|
||||
toolbarActions?: ImageAction[];
|
||||
onImageEnlarge?: (
|
||||
@ -378,6 +384,7 @@ export interface ImageFieldProps extends RendererProps {
|
||||
showToolbar?: boolean;
|
||||
imageGallaryClassName?: string;
|
||||
toolbarActions?: ImageAction[];
|
||||
enlargeWithGallary?: boolean;
|
||||
},
|
||||
target: any
|
||||
) => void;
|
||||
@ -410,7 +417,8 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
|
||||
enlargeCaption,
|
||||
showToolbar,
|
||||
toolbarActions,
|
||||
imageGallaryClassName
|
||||
imageGallaryClassName,
|
||||
enlargeWithGallary
|
||||
} = this.props;
|
||||
|
||||
onImageEnlarge &&
|
||||
@ -424,7 +432,8 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
|
||||
thumbRatio,
|
||||
showToolbar,
|
||||
toolbarActions,
|
||||
imageGallaryClassName
|
||||
imageGallaryClassName,
|
||||
enlargeWithGallary
|
||||
},
|
||||
this.props
|
||||
);
|
||||
|
||||
@ -73,6 +73,11 @@ export interface ImagesSchema extends BaseSchema {
|
||||
*/
|
||||
enlargeAble?: boolean;
|
||||
|
||||
/**
|
||||
* 放大时是否显示图片集
|
||||
*/
|
||||
enlargetWithImages?: boolean;
|
||||
|
||||
/**
|
||||
* 是否显示尺寸。
|
||||
*/
|
||||
@ -179,6 +184,7 @@ export class ImagesField extends React.Component<ImagesProps> {
|
||||
source,
|
||||
delimiter,
|
||||
enlargeAble,
|
||||
enlargeWithGallary,
|
||||
src,
|
||||
originalSrc,
|
||||
listClassName,
|
||||
@ -233,6 +239,7 @@ export class ImagesField extends React.Component<ImagesProps> {
|
||||
thumbMode={thumbMode}
|
||||
thumbRatio={thumbRatio}
|
||||
enlargeAble={enlargeAble!}
|
||||
enlargeWithGallary={enlargeWithGallary}
|
||||
onEnlarge={this.handleEnlarge}
|
||||
showToolbar={showToolbar}
|
||||
imageGallaryClassName={imageGallaryClassName}
|
||||
|
||||
@ -1573,11 +1573,17 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleImageEnlarge(info: any, target: {rowIndex: number; colIndex: number}) {
|
||||
handleImageEnlarge(
|
||||
info: any,
|
||||
target: {rowIndex: number; colIndex: number; type: string}
|
||||
) {
|
||||
const onImageEnlarge = this.props.onImageEnlarge;
|
||||
|
||||
// 如果已经是多张了，直接跳过
|
||||
if (Array.isArray(info.list)) {
|
||||
if (
|
||||
(Array.isArray(info.list) && info.enlargeWithGallary !== true) ||
|
||||
info.enlargeWithGallary === false
|
||||
) {
|
||||
return onImageEnlarge && onImageEnlarge(info, target);
|
||||
}
|
||||
|
||||
@ -1586,7 +1592,8 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
const column = store.columns[target.colIndex].pristine;
|
||||
|
||||
let index = target.rowIndex;
|
||||
const list: Array<any> = [];
|
||||
let list: Array<any> = [];
|
||||
|
||||
store.rows.forEach((row, i) => {
|
||||
const src = resolveVariable(column.name, row.data);
|
||||
|
||||
@ -1597,22 +1604,25 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
return;
|
||||
}
|
||||
|
||||
list.push({
|
||||
src,
|
||||
originalSrc: column.originalSrc
|
||||
? filter(column.originalSrc, row.data)
|
||||
: src,
|
||||
title: column.enlargeTitle
|
||||
? filter(column.enlargeTitle, row.data)
|
||||
: column.title
|
||||
? filter(column.title, row.data)
|
||||
: undefined,
|
||||
caption: column.enlargeCaption
|
||||
? filter(column.enlargeCaption, row.data)
|
||||
: column.caption
|
||||
? filter(column.caption, row.data)
|
||||
: undefined
|
||||
});
|
||||
const images = Array.isArray(src) ? src : [src];
|
||||
list = list.concat(
|
||||
images.map(item => ({
|
||||
src: item,
|
||||
originalSrc: column.originalSrc
|
||||
? filter(column.originalSrc, row.data)
|
||||
: item,
|
||||
title: column.enlargeTitle
|
||||
? filter(column.enlargeTitle, row.data)
|
||||
: column.title
|
||||
? filter(column.title, row.data)
|
||||
: undefined,
|
||||
caption: column.enlargeCaption
|
||||
? filter(column.enlargeCaption, row.data)
|
||||
: column.caption
|
||||
? filter(column.caption, row.data)
|
||||
: undefined
|
||||
}))
|
||||
);
|
||||
});
|
||||
|
||||
if (list.length > 1) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user