vue+vant使用图片预览功能ImagePreview的问题

如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：

见作者的图

https://juejin.im/post/5cbb28c4f265da0368145904

着实让员外百思不其解，在调用vant 的 ImagePreview )图片预览组件中，没有html，有的只是引入ImagePreview 和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview 也实现不了，因为根本就拿他没有一点办法。同时可以看到，这个图片预览的 html 是挂载在 window 上面的，实在是太 难为初学者了。

 

#第一种解决办法 

 

 后来多方请教，终于请到一位大佬，为员外指点迷津。

1. 首先需要定义两个实际变量，instance_before 和 instance_after，之所以是两个是因为在这个页面有两个 tab 里面的图片需要预览；

2. 然后把两个 ImagePreview[] 分别赋值给instance_before 和 instance_after，测试一下图片是否能正常打开关闭，结果当然是可以的；

3. 然后在 beforeRouteLeave 钩子中调用 close() 方法关闭预览遮罩。 其实这个问题主要还是单页只有一个vue实例，然后在调用 ImagePreview[] 的时候页面在返回上一个路由或前进到下一个路由，其产生的DOM节点还存在页面中，所以要做的是在当前路由跳转的时候及时移除或者隐藏这个DOM节点。 代码： 

import {ImagePreview} from 'vant';
export default {
        data() {
            return {
                active_:'',    //切换 tab 所对应的状态数字
                instance_before:'',
                instance_after:'',
            }
        },
        //在路由离开的时候，关闭预览的图片
        beforeRouteLeave(to,from,next){
            if(this.active_ == 0){
                this.instance_before.close();
            }else{
                this.instance_after.close();
            }
            next();
        },
        methods: {
            //查看图片
            show_before_img(){
                this.instance_before = ImagePreview({
                    images: [this.warsher_brfore],
                });
            },
            show_after_img(){
                this.instance_after = ImagePreview({
                    images: [this.warsher_after],
                });
            },
        }
}