fix(imagePreview): 阻止关闭预览事件对父结构的非必要影响 (#2227)

* fix(imagePreview): 阻止关闭预览事件对父结构对影响 * chore: ts
jdf2e · May 10, 2024 · 3ae67d5 · 3ae67d5
1 parent 286f073
commit 3ae67d5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/packages/imagepreview/imagepreview.taro.tsx b/src/packages/imagepreview/imagepreview.taro.tsx
@@ -7,7 +7,7 @@ import React, {
   ReactNode,
 } from 'react'
 import Taro from '@tarojs/taro'
-import { Video as TaroVideo } from '@tarojs/components'
+import { ITouchEvent, Video as TaroVideo } from '@tarojs/components'
 import classNames from 'classnames'
 import { Close } from '@nutui/icons-react-taro'
 import Popup from '@/packages/popup/index.taro'
@@ -241,7 +241,8 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
     setActive(page + 1)
     props.onChange?.(page + 1)
   }
-  const onCloseInner = () => {
+  const onCloseInner = (e: ITouchEvent | React.MouseEvent) => {
+    e.stopPropagation()
     setShowPop(false)
     setActive(innerNo)
     scaleNow()
@@ -251,10 +252,10 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
       scale: 1,
     })
   }
-  const closeOnImg = () => {
+  const closeOnImg = (e: ITouchEvent | React.MouseEvent) => {
     // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
     if (closeOnContentClick) {
-      onCloseInner()
+      onCloseInner(e)
     }
   }
 

diff --git a/src/packages/imagepreview/imagepreview.tsx b/src/packages/imagepreview/imagepreview.tsx
@@ -239,7 +239,8 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
     props.onChange?.(page + 1)
   }
 
-  const onCloseInner = () => {
+  const onCloseInner = (e: React.MouseEvent<Element, MouseEvent>) => {
+    e.stopPropagation()
     setShowPop(false)
     setActive(innerNo)
     scaleNow()
@@ -250,10 +251,10 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
     })
   }
 
-  const closeOnImg = () => {
+  const closeOnImg = (e: React.MouseEvent<Element, MouseEvent>) => {
     // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
     if (closeOnContentClick) {
-      onCloseInner()
+      onCloseInner(e)
     }
   }
   const duration = typeof autoPlay === 'string' ? parseInt(autoPlay) : autoPlay