feat(image-viewer): enable props image-props (#4078)

* feat(image-viewer): enable props show-menu-by-longpress

* feat(image-viewer): enable props image-props

* fix: fix cr

---------

Co-authored-by: anlyyao <[email protected]>

Author: betavs

packages/components/image-viewer/README.en-US.md

@@ -11,8 +11,9 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v
 background-color | String | - | \- | N
 close-btn | String / Boolean / Object | false | \- | N
 delete-btn | String / Boolean / Object | false | \- | N
-images | Array | [] | Typescript：`Array<string>` | N
-initial-index | Number | 0 | Typescript：`Number` | N
+image-props | Object | - | `1.12.0`。Typescript: `ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/image-viewer/type.ts) | N
+images | Array | [] | Typescript: `Array<string>` | N
+initial-index | Number | 0 | Typescript: `Number` | N
 lazy | Boolean | true | `1.9.4` | N
 show-index | Boolean | false | \- | N
 using-custom-navbar | Boolean | false | `v1.1.4` | N

packages/components/image-viewer/README.md

@@ -57,6 +57,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场
 background-color | String | - | 遮罩的背景颜色 | N
 close-btn | String / Boolean / Object | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 | N
 delete-btn | String / Boolean / Object | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 | N
+image-props | Object | - | `1.12.0`。透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/image-viewer/type.ts) | N
 images | Array | [] | 图片数组。TS 类型：`Array<string>` | N
 initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N
 lazy | Boolean | true | `1.9.4`。是否开启图片懒加载。开启后会预加载当前图片、相邻图片 | N

packages/components/image-viewer/image-viewer.wxml

@@ -34,12 +34,17 @@
         <swiper-item wx:for="{{images}}" wx:key="index" class="{{classPrefix}}__preview-image">
           <t-image
             wx:if="{{!lazy || utils.shouldLoadImage(index, currentSwiperIndex, loadedImageIndexes) }}"
-            t-class="t-image--external"
+            t-class="{{prefix}}-image--external"
+            class="{{classPrefix}}__image"
             style="{{imagesStyle[index].style || ''}}"
-            mode="aspectFit"
-            src="{{item}}"
             data-index="{{index}}"
-            class="{{classPrefix}}__image"
+            src="{{item}}"
+            mode="{{imageProps && imageProps.mode || 'aspectFit'}}"
+            lazy="{{imageProps && imageProps.lazy || false}}"
+            loading="{{imageProps && imageProps.loading || 'default'}}"
+            shape="{{imageProps && imageProps.shape || 'square'}}"
+            webp="{{imageProps && imageProps.webp || false}}"
+            show-menu-by-longpress="{{imageProps && imageProps.showMenuByLongpress || false}}"
             bindload="onImageLoadSuccess"
           ></t-image>
         </swiper-item>

packages/components/image-viewer/props.ts

@@ -21,6 +21,10 @@ const props: TdImageViewerProps = {
     type: null,
     value: false,
   },
+  /** 透传至 Image 组件 */
+  imageProps: {
+    type: Object,
+  },
   /** 图片数组 */
   images: {
     type: Array,

packages/components/image-viewer/type.ts

@@ -4,6 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { ImageProps } from '../image/index';
+
 export interface TdImageViewerProps {
   /**
    * 遮罩的背景颜色
@@ -29,6 +31,13 @@ export interface TdImageViewerProps {
     type: null;
     value?: string | boolean | object;
   };
+  /**
+   * 透传至 Image 组件
+   */
+  imageProps?: {
+    type: ObjectConstructor;
+    value?: ImageProps;
+  };
   /**
    * 图片数组
    * @default []