8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. image
  3. antd 预览关闭弹窗

antd 预览关闭弹窗

Mof 2月前
18 0

我在 antd 弹出窗口内使用 antd 图像并打开图像的预览，然后如果我单击预览或关闭预览，这会导致弹出窗口也关闭，我该如何防止这种情况发生？我……

我在 antd 弹出窗口内使用 antd 图像并打开图像的预览，然后如果我单击预览或关闭预览，这会导致弹出窗口也关闭，我该如何防止这种情况发生？

我试过了 

     <Popover
        destroyTooltipOnHide
        trigger="click"
        placement="bottomLeft"
        content={
          <div onClick={stopPropagation}>
            <Image
              src="/money.png"
              alt="search"
              onClick={stopPropagation}
              width={40}
              height={40}
              preview={{
                visible: isPreviewVisible,
                onVisibleChange: (visible) => {
                  setIsPreviewVisible(visible);
                },
              }}
            />
          </div>
        }
      >
        content
      </Popover>

但没有用

帖子版权声明 1、本帖标题：antd 预览关闭弹窗
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Mof在本站《image》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    我以前在 Popover 中使用 Ant Design 的图像组件时遇到过这个问题，我知道这有多令人沮丧。问题出现的原因是，当打开或关闭图像预览时，点击事件也会传播到 Popover，导致其关闭。

    以下是我的处理方式：

    停止事件传播：使用 stopPropagation 是正确的，但请确保将其应用在正确的位置。点击事件需要在图像和 Popover 的触发级别停止。

    下面是我应用它的一个例子： 

    `const stopPropagation = (e) => {
  e.stopPropagation();
};

<Popover
  content={<span>Popover Content</span>}
  trigger="click"
>
  <div onClick={stopPropagation}>
    <Image
      preview={{
        visible: isPreviewVisible,
        onVisibleChange: (visible) => {
          setIsPreviewVisible(visible);
        },
      }}
      src={imageUrl}
      onClick={stopPropagation}
    />
  </div>
</Popover>
`

    单独管理预览可见性：我发现手动管理预览可见性状态有助于防止弹出窗口关闭。在上面的代码中，我使用状态变量 isPreviewVisible 来控制预览何时可见，并应用 onVisibleChange 方法以确保在触发预览时弹出窗口不会关闭。

    触发模式：根据您的使用情况，您可能需要检查将 Popover 的触发道具更改为悬停或其他选项是否有助于最大限度地减少交互冲突。

    如果这仍然不能解决问题，请尝试通过将弹出窗口和图像包装在单独的组件中并确保每个组件的事件都独立处理来隔离弹出窗口逻辑。

    请让我知道这种方法是否适合您！

  • 引用 3楼

    我的情况略有不同，我在弹出窗口的内容中使用了图片，并且按照您在内容中显示的方式放置图片，但没有成功。我编辑了上面的代码，以便更清楚地展示我的情况

返回
作者最近主题：