Tencent · lifeiFront · Mar 3, 2025
@@ -5,7 +5,7 @@ import { ReactElement, ReactNode, CSSProperties, FormEvent, DragEvent, Synthetic
 // TElement 表示 API 只接受传入组件
 export type TElement<T = undefined> = T extends undefined ? ReactElement : (props: T) => ReactElement;
 // 1. TNode = ReactNode; 2. TNode<T> = (props: T) => ReactNode
-export type TNode<T = undefined> = T extends undefined ? ReactNode : ReactNode | ((props: T) => ReactNode);
+export type TNode<T = undefined> = T extends undefined ? ReactNode | (() => ReactNode) : ReactNode | ((props: T) => ReactNode);
 
 export type AttachNodeReturnValue = HTMLElement | Element | Document;
 export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue);

@@ -73,6 +73,7 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
             defaultIndex={props.defaultIndex}
             index={props.index}
             onIndexChange={props.onIndexChange}
+            onDownload={props.onDownload}
             draggable={props.draggable}
             closeOnOverlay={props.closeOnOverlay}
             closeBtn={props.closeBtn}

@@ -234,6 +234,7 @@ interface ImageViewerUtilsProps {
     rotate: string;
     originsize: string;
   };
+  onDownload?:TdImageViewerProps['onDownload'];
 }
 
 export const ImageViewerUtils: React.FC<ImageViewerUtilsProps> = ({
@@ -245,6 +246,7 @@ export const ImageViewerUtils: React.FC<ImageViewerUtilsProps> = ({
   onMirror,
   onReset,
   tipText,
+  onDownload,
 }) => {
   const { classPrefix } = useConfig();
   const { MirrorIcon, RotationIcon, ImageIcon } = useGlobalIcon({
@@ -293,6 +295,11 @@ export const ImageViewerUtils: React.FC<ImageViewerUtilsProps> = ({
             size="medium"
             name="download"
             onClick={() => {
+              if(isFunction(onDownload)){
+                // 自定义图片预览下载
+                onDownload(currentImage.mainImage);
+                return;
+              }
               downloadFile(currentImage.mainImage);
             }}
           />
@@ -387,6 +394,7 @@ export interface ImageModalProps {
   draggable: boolean;
   closeBtn: boolean | TNode;
   closeOnEscKeydown?: boolean;
+  onDownload?:TdImageViewerProps['onDownload'];
   onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' }) => void;
   imageReferrerpolicy?: ImageViewerProps['imageReferrerpolicy'];
 }
@@ -409,6 +417,7 @@ export const ImageModal: React.FC<ImageModalProps> = (props) => {
     title,
     closeOnEscKeydown,
     imageReferrerpolicy,
+    onDownload,
     ...resProps
   } = props;
   const { classPrefix } = useConfig();
@@ -572,6 +581,7 @@ export const ImageModal: React.FC<ImageModalProps> = (props) => {
         onZoomOut={onZoomOut}
         scale={scale}
         currentImage={currentImage}
+        onDownload={onDownload}
         onRotate={onRotate}
         onMirror={onMirror}
         onReset={onReset}

@@ -5,6 +5,7 @@
 import { TdImageViewerProps } from './type';
 
 export const imageViewerDefaultProps: TdImageViewerProps = {
+  attach: 'body',
   closeBtn: true,
   closeOnEscKeydown: true,
   draggable: undefined,

@@ -28,4 +28,5 @@ visible | Boolean | false | hide or show image viewer | N
 defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
 zIndex | Number | - | \- | N
 onClose | Function |  | Typescript：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`<br/> | N
+onDownload | Function |  | Typescript：`(url: string \| File) => void`<br/> | N
 onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/> | N
@@ -8,7 +8,7 @@
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+attach | String / Function | 'body' | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 closeBtn | TNode | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
@@ -28,4 +28,5 @@ visible | Boolean | false | 隐藏/显示预览 | N
 defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
 zIndex | Number | - | 层级，默认为 2000 | N
 onClose | Function |  | TS 类型：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`<br/>关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键 | N
+onDownload | Function |  | TS 类型：`(url: string \| File) => void`<br/>自定义预览图片下载操作，url为图片链接 | N
 onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N
@@ -9,7 +9,7 @@ import { MouseEvent, KeyboardEvent } from 'react';
 
 export interface TdImageViewerProps {
   /**
-   * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
    * @default 'body'
    */
   attach?: AttachNode;
@@ -106,6 +106,10 @@ export interface TdImageViewerProps {
    * 关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键
    */
   onClose?: (context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEvent<HTMLElement> | KeyboardEvent }) => void;
+  /**
+   * 自定义预览图片下载操作，url为图片链接
+   */
+  onDownload?: (url: string | File) => void;
   /**
    * 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片
    */