ImageViewer preview component supports self-defined preview content

src/components/image-viewer/demos/demo1.less

@@ -5,11 +5,17 @@
 
 .footerButton {
   font-size: var(--adm-font-size-4);
-  color: #ffffff;
+  color: #fff;
   line-height: 1;
   padding: 10px 16px;
   background-color: rgba(153, 153, 153, 0.4);
   border-radius: 100px;
   display: inline-block;
   cursor: pointer;
 }
+.image-render {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}

src/components/image-viewer/demos/demo1.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
-import { ImageViewer, Button } from 'antd-mobile'
+import { Button, ImageViewer } from 'antd-mobile'
 import { DemoBlock } from 'demos'
-import { demoImage, demoImages } from './images'
+import React, { useState } from 'react'
 import styles from './demo1.less'
+import { demoImage, demoImages } from './images'
 
 // 单张图片预览
 const Single = () => {
@@ -95,6 +95,38 @@ const ViewWithFooter = () => {
   )
 }
 
+const ViewImageRender = () => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setVisible(true)
+        }}
+      >
+        显示内容
+      </Button>
+      <ImageViewer
+        visible={visible}
+        onClose={() => {
+          setVisible(false)
+        }}
+        imageRender={() => (
+          <div className={styles['image-render']}>
+            <video
+              muted
+              width='100%'
+              controls
+              src='https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ'
+            />
+          </div>
+        )}
+      />
+    </>
+  )
+}
+
 export default () => {
   return (
     <>
@@ -134,6 +166,10 @@ export default () => {
       <DemoBlock title='自定义底部额外内容'>
         <ViewWithFooter />
       </DemoBlock>
+
+      <DemoBlock title='自定义预览内容'>
+        <ViewImageRender />
+      </DemoBlock>
     </>
   )
 }

src/components/image-viewer/image-viewer.less

@@ -7,6 +7,10 @@
     touch-action: none;
     user-select: none;
   }
+  &-image-render {
+    width: 100%;
+    height: 100%;
+  }
   &-footer {
     position: absolute;
     width: 100%;

src/components/image-viewer/image-viewer.tsx

@@ -1,21 +1,21 @@
+import classNames from 'classnames'
+import type { FC, ReactNode } from 'react'
 import React, {
   forwardRef,
+  useCallback,
   useImperativeHandle,
   useRef,
   useState,
-  useCallback,
 } from 'react'
-import type { FC, ReactNode } from 'react'
-import { mergeProps } from '../../utils/with-default-props'
 import {
   GetContainer,
   renderToContainer,
 } from '../../utils/render-to-container'
+import { mergeProps } from '../../utils/with-default-props'
 import Mask from '../mask'
 import SafeArea from '../safe-area'
 import { Slide } from './slide'
 import { Slides, SlidesRef } from './slides'
-import classNames from 'classnames'
 
 const classPrefix = `adm-image-viewer`
 
@@ -27,6 +27,8 @@
   onClose?: () => void
   afterClose?: () => void
   renderFooter?: (image: string) => ReactNode
+  imageRender?: () => ReactNode
+
   classNames?: {
     mask?: string
     body?: string
@@ -64,6 +66,14 @@
             maxZoom={props.maxZoom}
           />
         )}
+        {!props.image && (
+          <div
+            className={`${classPrefix}-image-render`}
+            onClick={props.onClose}
+          >
+            {props.imageRender?.()}
+          </div>
+        )}
       </div>
       {props.image && (
         <div className={`${classPrefix}-footer`}>

src/components/image-viewer/index.zh.md

@@ -21,6 +21,7 @@
 | maxZoom | 最大缩放比例 | `number \| 'auto'` | `3` |
 | onClose | 关闭时触发 | `() => void` | - |
 | renderFooter | 渲染底部额外内容 | `(image: string) => ReactNode` | - |
+| imageRender | 自定义渲染内容 | `() => ReactNode` | - |
 | visible | 是否显示 | `boolean` | `false` |
 
 ## ImageViewer.Multi