ImageViewer 组件点击透传问题

[yuqi17]

Version of antd-mobile

5.32.0

Operating system and its version

No response

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

我写了一个上传图片的功能, 上传之后我点击上传的文件名,打开ImageViewer 组件传递图片路径进行预览. 此时这个组件的遮罩层在上传按钮和文件名的上方, 如果我点击这个位置去关闭遮罩层,会引起透传, 导致打开上传选择文件的功能,或者再次预览.

Relevant log output

No response

[lisliefor]

ImageViewer在visible设为false的动画中，做了阻止冒泡的动作，如果你没使用它的visible，而是直接中断渲染，它就存在这个问题。
错误用法：
{visible && <ImageViewer *** />}
正确用法：
<ImageViewer visible={visible} />
不过，我还是希望官方能在onClose方法中，把evt引用传递出来，或者支持一个阻止冒泡的开关，或者干脆直接默认阻止冒泡。

另外，还发现一个bug。
在浏览器中访问web应用，点击mask或者图片，不会触发ImageViewer的onClose，也是图片打开了关不掉，希望官方关注一下。

[yuqi17]

我用的就是 <ImageViewer visible={visible} /> 这种, 设置为false,依然有穿透. 建议改成点图标关闭

[lisliefor]

我用的就是 <ImageViewer visible={visible} /> 这种, 设置为false,依然有穿透. 建议改成点图标关闭

这个就奇怪了，我看到的现象和你不同。
期待官方的回复。

[liuliu66666]

+1

[1587315093]

来个链接复现呢，没太明白具体的结构~

[github-actions]

Hi, yuqi17.

Please provide a online reproduction so that we can help you troubleshoot the problem. You can create a demo by codesandbox or stackblitz.

我们需要你提供一个在线的重现实例，以便于我们帮你排查问题。你可以通过 codesandbox 或 stackblitz 创建一个实例。

[yuqi17]

https://codesandbox.io/s/elated-newton-lvwckn 由于没有后端服务,上传可以认为成功了. 然后点击上传成功后的图片的图标就可以调用ImageViwer组件预览它, 然后在上传按钮的上方点一下遮罩层, 就触发了再次的选择文件. 在沙盒里面我没有发现问题, 不知道是不是图片没有上传成功的原因. 实际上是有问题的, 我用的antd 和 antd mobile 的版本都在例子的package.json里面配置的跟我的情况一样.

[liuliu66666]

我也遇到了同样的问题，在使用ImageViewer.Multi，在点击Mask准备关闭图片预览，正好Mask点击处下层也有图片，就会一直闪动（关掉又立马开启预览）

[1587315093]

我也遇到了同样的问题，在使用ImageViewer.Multi，在点击Mask准备关闭图片预览，正好Mask点击处下层也有图片，就会一直闪动（关掉又立马开启预览）

yuqi17 的复现好像没看到问题，我点击蒙层下的Upload 没重触发，你能来一个沙盒复现看看吗

[yuqi17]

我也遇到了同样的问题，在使用ImageViewer.Multi，在点击Mask准备关闭图片预览，正好Mask点击处下层也有图片，就会一直闪动（关掉又立马开启预览）

弄个sandbox 把你的问题呈现出来

[1587315093]

@liuliu66666

[Memories-SlowFever]

我也遇到了同样的问题，在使用ImageViewer.Multi，在点击Mask准备关闭图片预览，正好Mask点击处下层也有图片，就会一直闪动（关掉又立马开启预览）

+1 最后解决没

[hardmanhong]

我也遇到了，只能自己封装了一个