diff --git a/packages/vant/src/image-preview/ImagePreview.tsx b/packages/vant/src/image-preview/ImagePreview.tsx index ae15d79966f..6240ce9b4fe 100644 --- a/packages/vant/src/image-preview/ImagePreview.tsx +++ b/packages/vant/src/image-preview/ImagePreview.tsx @@ -73,6 +73,7 @@ export const imagePreviewProps = { startPosition: makeNumericProp(0), showIndicators: Boolean, closeOnPopstate: truthProp, + closeOnClickImage: truthProp, closeOnClickOverlay: truthProp, closeIconPosition: makeStringProp('top-right'), teleport: [String, Object] as PropType, @@ -185,6 +186,7 @@ export default defineComponent({ rootHeight={state.rootHeight} disableZoom={state.disableZoom} doubleScale={props.doubleScale} + closeOnClickImage={props.closeOnClickImage} closeOnClickOverlay={props.closeOnClickOverlay} onScale={emitScale} onClose={emitClose} diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx index 7ee0e852ddf..3476d7c817c 100644 --- a/packages/vant/src/image-preview/ImagePreviewItem.tsx +++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx @@ -54,6 +54,7 @@ const imagePreviewItemProps = { rootHeight: makeRequiredProp(Number), disableZoom: Boolean, doubleScale: Boolean, + closeOnClickImage: Boolean, closeOnClickOverlay: Boolean, }; @@ -251,8 +252,12 @@ export default defineComponent({ }; const checkClose = (event: TouchEvent) => { - const isClickOverlay = event.target === swipeItem.value?.$el; + const swipeItemEl: HTMLElement = swipeItem.value?.$el; + const imageEl = swipeItemEl.firstElementChild; + const isClickOverlay = event.target === swipeItemEl; + const isClickImage = imageEl?.contains(event.target as HTMLElement); + if (!props.closeOnClickImage && isClickImage) return; if (!props.closeOnClickOverlay && isClickOverlay) return; emit('close'); diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md index 7a339625def..7ca4a86ed04 100644 --- a/packages/vant/src/image-preview/README.md +++ b/packages/vant/src/image-preview/README.md @@ -150,10 +150,14 @@ export default { ### Use image slot -When using ImagePreview component, you can custom the image through the `image` slot, such as render a video content. +When using ImagePreview component, you can custom the image through the `image` slot, such as render a video content. In this example, you can also set `close-on-click-image` prop to `false`, so that the preview won't be accidentally closed when you click on the video. ```html - +