Skip to content

feat: 图片集优化 #8697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sqzhou wants to merge 7 commits into
base: master
Choose a base branch
from
Open

feat: 图片集优化 #8697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
254c1ff
feat: 图片集优化
sqzhou Nov 7, 2023
be06fb4
feat: 图片集优化
sqzhou Nov 7, 2023
9ae6fb4
feat: 图片集优化
sqzhou Nov 8, 2023
8dc06a0
feat: 图片集优化
sqzhou Nov 9, 2023
ee350bd
feat: 图片集优化
sqzhou Nov 10, 2023
f575308
chore: 完善图片集单测
sqzhou Nov 16, 2023
ab6d0d9
feat: 图片集放大显示模式优化
sqzhou Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions docs/zh-CN/components/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,58 @@ Array<{
}
```

## 内嵌模式

> 6.0.1 及以上版本

在 **images 组件** 上，配置`embed`为`true`，支持放大预览

```schema
{
"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}",
"embed": true
}
}
```


## 用作 Field 时

当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量
Expand Down Expand Up @@ -680,3 +732,7 @@ List 的内容、Card 卡片的内容配置同上。
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
| embed | `boolean` | `false` | 内嵌模式，当是 `true` 开启内嵌显示 | `6.0.1` |
| imageStyle | `object` | | 设置图片列表每一项的style | `6.0.1` |
| position.toolbar | `top' \| 'bottom'` | `'bottom'` | 设置图片放大时，工具栏位置 | `6.0.1` |
| position.description | `'left' \| 'right'` | `'right'` | 设置图片放大时，描述对应显示框位置 | `6.0.1` |
Loading