uni-app web vue3 调用了 previewImage api 关闭预览后用来挂载图片预览的div并没有移除

uni-app web vue3 调用了 previewImage api 关闭预览后用来挂载图片预览的div并没有移除

示例代码：

<template>  
    <view @click="handleClick">预览图片</view>  
</template>  

<script>  
    export default {  
        methods: {  
            handleClick() {  
                uni.previewImage({  
                    urls: ['https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png'],  
                })  
            }  
        }  
    }  
</script>

操作步骤：

如上代码

预期结果：

移除多余dom

实际结果：

没有移除

bug描述：

web vue3 调用了 previewImage api，关闭预览后用来挂载图片预览的div并没有移除。

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 11
HBuilderX类型 正式
HBuilderX版本号 4.66
浏览器平台 Chrome
浏览器版本 111
项目创建方式 HBuilderX


更多关于uni-app web vue3 调用了 previewImage api 关闭预览后用来挂载图片预览的div并没有移除的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这里没有主动移除是为了复用，需要移除的理由是什么呢？

更多关于uni-app web vue3 调用了 previewImage api 关闭预览后用来挂载图片预览的div并没有移除的实战教程也可以访问 https://www.itying.com/category-93-b0.html


为什么要这么做呢？很多组件库有类似的行为都是新创建一个DOM，卸载的时候移除DOM。平白无故增加了一个div还是可能对开发者产生影响的，这就是副作用，不应该及时清理吗？

回复 用户2803209: 内部的 modal、toast、loading、previewImage 都没有手动移除复用的dom，讨论下来决定暂不处理，如果你需要筛选dom，可以先考虑过滤此类dom。

这是一个已知的uni-app在H5平台下的DOM残留问题。在Vue3环境下，使用uni.previewImage预览图片后，关闭时确实会出现挂载节点未及时清除的情况。

这个问题主要是由于H5平台的previewImage实现机制导致的。在关闭预览时，相关的DOM节点没有完全从文档中移除，而是保留了容器节点。

目前可以尝试以下临时解决方案：

  1. 手动清除残留节点：
const handleClick = () => {
  uni.previewImage({
    urls: ['https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png'],
    success: () => {
      setTimeout(() => {
        const previewNodes = document.querySelectorAll('.uni-preview-image');
        previewNodes.forEach(node => node.remove());
      }, 300);
    }
  });
}
回到顶部