feat(images): 添加大图模式下的缩放控制参数fullThumbMode

- 新增fullThumbMode参数控制大图模式下的图片缩放方式 - 默认使用cover模式填充容器 - 更新文档说明和示例
baidu · Feb 8, 2025 · 99dc974 · 99dc974
1 parent e9f1b26
commit 99dc974
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/docs/zh-CN/components/images.md b/docs/zh-CN/components/images.md
@@ -67,6 +67,11 @@ order: 53
 - `thumb`: 缩略图模式(默认),将图片以缩略图网格的形式展示
 - `full`: 大图模式,以幻灯片形式展示单张大图,可左右滑动切换
 
+在大图模式下,可以通过`fullThumbMode`属性来控制图片的缩放模式:
+
+- `cover`: 保持图片比例,填充整个容器,可能会裁剪部分图片(默认)
+- `contain`: 保持图片比例,确保图片完整显示在容器内
+
 ```schema
 {
     "type": "page",
@@ -90,7 +95,8 @@ order: 53
         {
             "type": "images",
             "source": "${images}",
-            "displayMode": "full"
+            "displayMode": "full",
+            "fullThumbMode": "cover"
         }
     ]
 }
@@ -717,3 +723,4 @@ List 的内容、Card 卡片的内容配置同上。
 | showToolbar        | `boolean`                                  | `false`   | 放大模式下是否展示图片的工具栏                                                                                                          | `2.2.0` |
 | toolbarActions     | `ImageAction[]`                            |           | 图片工具栏，支持旋转，缩放，默认操作全部开启                                                                                            | `2.2.0` |
 | displayMode        | `'thumb' \| 'full'`                        | `'thumb'` | 展示模式,支持缩略图模式（thumb）和大图模式（full）                                                                                      |
+| fullThumbMode      | `'cover' \| 'contain'`                     | `'cover'` | 大图模式下的图片缩放模式                                                                                                                |
diff --git a/packages/amis-editor/src/plugin/Images.tsx b/packages/amis-editor/src/plugin/Images.tsx
@@ -138,7 +138,7 @@ export class ImagesPlugin extends BasePlugin {
                         value: 'thumb'
                       },
                       {
-                        label: '画廊模式',
+                        label: '大图模式',
                         value: 'full'
                       }
                     ]

diff --git a/packages/amis-ui/scss/components/_images.scss b/packages/amis-ui/scss/components/_images.scss
@@ -70,7 +70,18 @@
         display: block;
         max-width: 100%;
         height: auto;
-        object-fit: contain;
+
+        &--contain {
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        }
+
+        &--cover {
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
       }
 
       &-itemIndex {

diff --git a/packages/amis/src/renderers/Images.tsx b/packages/amis/src/renderers/Images.tsx
@@ -127,6 +127,11 @@ export interface ImagesSchema extends BaseSchema {
    * 当前展示图片索引
    */
   currentIndex?: number;
+
+  /**
+   * 大图模式下的缩放模式
+   */
+  fullThumbMode?: 'cover' | 'contain';
 }
 
 export interface ImagesProps
@@ -158,7 +163,8 @@ export class ImagesField extends React.Component<ImagesProps, ImagesState> {
     placehoder: '-',
     thumbMode: 'contain',
     thumbRatio: '1:1',
-    displayMode: 'thumb'
+    displayMode: 'thumb',
+    fullThumbMode: 'cover'
   };
 
   state: ImagesState = {
@@ -330,7 +336,8 @@ export class ImagesField extends React.Component<ImagesProps, ImagesState> {
       env,
       themeCss,
       imagesControlClassName,
-      displayMode
+      displayMode,
+      fullThumbMode
     } = this.props;
 
     const {currentIndex} = this.state;
@@ -448,7 +455,10 @@ export class ImagesField extends React.Component<ImagesProps, ImagesState> {
                         >
                           <div className={cx('Images-itemInner')}>
                             <img
-                              className={cx('Image-image')}
+                              className={cx('Image-image', {
+                                [`Image-image--${fullThumbMode}`]:
+                                  displayMode === 'full'
+                              })}
                               src={
                                 (src
                                   ? filter(src, item, '| raw')