Skip to content
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

feat: images 支持图集排列方式 #11490

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

feat: images 支持图集排列方式 #11490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d8a8937
5.支持source
Jan 11, 2025
350212e
fix: 添加图集排序方式（厂字布局）
Jan 11, 2025
c62eb3d
fix: 添加图集排序方式（倒厂字布局）
Jan 11, 2025
b35e4cc
fix: 添加图集排序方式（倒厂字布局）
Jan 11, 2025
ca1934a
fix: 添加图集排序方式
Jan 11, 2025
17f3074
fix: 修改md
Jan 11, 2025
2cd4942
fix: 修改允许图片放大
Jan 14, 2025
2fac3ec
fix: 屏蔽多余图片
Jan 14, 2025
329a7fb
Revert "fix: 屏蔽多余图片"
Jan 14, 2025
f8c54f2
fix: 屏蔽多余图片
Jan 14, 2025
42996c4
还原example/index
Jan 15, 2025
6e52a83
删除无用示例图片
Jan 15, 2025
e67b0d1
添加8种图集示例
Jan 15, 2025
9e7f2a4
更新图集类命名规则
Jan 15, 2025
762b386
删除不符合规则样式
Jan 15, 2025
3c1f369
feat: 更新图片集悬浮蒙层
Jan 16, 2025
8ceb870
feat: 更新图片集悬浮蒙层
Jan 16, 2025
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
222 changes: 222 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 @@ -60,6 +60,228 @@ order: 53
}
```

图集排列方式，通过sortType字段调整布局方式`'sm-mm-mmm-m'| 'sss-ss-ms-m'| 'sms-ss-sms-l' | 'sm-mm-sss-ss' | 'ms-ss-sss-ss'| 'sss-ss-ms-ss' | 'ssss-ss-mss-ss' | 'sss-ss-mm-ss';`
可以通过改变width和height来调整图片大小。默认宽度是800，高度是450。

### 1
`sortType: 'sm-mm-mmm-m'`

```schema
{
"type": "page",
"data": {
"imageList": [
"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",
]
},
"body": [
{
"type": "images",
"sortType": "sm-mm-mmm-m",
"width":"200",
"height":"112.5",
"source": "${imageList}"
},
]
}
```
### 2
`sortType: 'sss-ss-ms-m'`

```schema
{
"type": "page",
"data": {
"imageList": [
"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",
]
},
"body": [
{
"type": "images",
"sortType": "sss-ss-ms-m",
"width":"200",
"height":"112.5",
"source": "${imageList}"
},
]
}
```
### 3
`sortType: 'sms-ss-sms-l'`

```schema
{
"type": "page",
"data": {
"imageList": [
"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/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
]
},
"body": [
{
"type": "images",
"sortType": "sms-ss-sms-l",
"width":"200",
"height":"112.5",
"source": "${imageList}"
},
]
}
```

### 4
`sortType: 'sm-mm-sss-ss'`

```schema
{
"type": "page",
"data": {
"imageList": [
"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/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
]
},
"body": [
{
"type": "images",
"sortType": "sm-mm-sss-ss",
"width":"200",
"height":"112.5",
"source": "${imageList}"
},
]
}
```
### 5

`sortType: 'ms-ss-sss-ss'`

```schema
{
"type": "page",
"data": {
"imageList": [
"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/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
]
},
"body": [
{
"type": "images",
"sortType": "ms-ss-sss-ss",
"width":"200",
"height":"112.5",
"source": "${imageList}"
},
]
}
```

### 6

`sortType: 'sss-ss-ms-ss'`

```schema
{
"type": "page",
"data": {
"imageList": [
"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/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",
]
},
"body": [
{
"type": "images",
"sortType": "sss-ss-ms-ss",
"width":"200",
"height":"112.5",
"source": "${imageList}"
},
]
}
```
### 7

`sortType: 'ssss-ss-mss-ss'`

```schema
{
"type": "page",
"data": {
"imageList": [
"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/1578395692942/d8e4992057f9.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/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",

]
},
"body": [
{
"type": "images",
"sortType": "ssss-ss-mss-ss",
"width":"200",
"height":"112.5",
"source": "${imageList}"
},
]
}
```

### 8

`sortType: 'sss-ss-mm-ss'`

```schema
{
"type": "page",
"data": {
"imageList": [
"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/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",

]
},
"body": [
{
"type": "images",
"sortType": "sss-ss-mm-ss",
"width":"200",
"height":"112.5",
"source": "${imageList}"
},
]
}
```


## 值格式

除了支持纯文本数组以外，也支持对象数组，如：
Expand Down
57 changes: 44 additions & 13 deletions examples/components/Index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,47 @@
export default {
type: 'page',
title: '标题',
remark: {
title: '标题',
body: '这是一段描述问题，注意到了没，还可以设置标题。而且只有点击了才弹出来。',
icon: 'question-mark',
placement: 'right',
trigger: 'click',
rootClose: true
"type": "page",
bawawa marked this conversation as resolved.
Show resolved Hide resolved
"data": {
"imageList": [
{
image: "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
desc: "图片描述"
},
{
image: "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
desc: "图片描述"
},
{
image: "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
desc: "图片描述"
},
{
image: "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
desc: "图片描述"
},
]
},
body: '内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}',
aside: '边栏部分',
toolbar: '工具栏',
initApi: '/api/mock2/page/initData'
"body": [
{
"type": "images",
"sortType": "sm-mm-mmm-m",
"value": [
{
image: "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
},
{
image: "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
desc: "图片描述"
},
{
image: "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
desc: "图片描述"
},
{
image: "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
desc: "图片描述"
},
],
// "source": "${imageList}"
},
]
};
39 changes: 39 additions & 0 deletions packages/amis-ui/scss/components/_images.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,3 +205,42 @@
.Image-view-icon {
content: var(--image-image-normal-icon);
}

.Img-container{
position: relative;

.mask{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
transition: all ease-in-out .3s;
display: flex;
justify-content: center;
align-items: center;
color: transparent;
font-weight: bold;
font-size: px2rem(15px);
}

.mask:hover{
background: rgba(0,0,0,.5);
color: white;
}
}

.enlarge-container{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,.5);
transition: all ease-in-out .3s;
}



Loading