Vue使用有赞ImagePreview(图片预览)遇到的问题

首先说下有赞ImagePreview的使用
有赞官方文档:https://youzan.github.io/vant/#/zh-CN/image-preview
Vue使用有赞ImagePreview(图片预览)遇到的问题_第1张图片
Vue使用有赞ImagePreview(图片预览)遇到的问题_第2张图片
先上个预览效果图
Vue使用有赞ImagePreview(图片预览)遇到的问题_第3张图片
问题点:如果图片预览弹框没有隐藏的话,在路由切换的时候也会一直显示
如图,路由已切换:
Vue使用有赞ImagePreview(图片预览)遇到的问题_第4张图片
解决方案:beforeRouteLeave 钩子中调用 close() 方法关闭预览遮罩
beforeRouteLeave 钩子:离开路由之前执行的函数

   beforeRouteLeave(to,from,next){
        this.ImagePreviewDialog.close()
        next()
    },

Vue使用有赞ImagePreview(图片预览)遇到的问题_第5张图片
然后这个问题就可以完美解决了
(如有疑问请留言)

你可能感兴趣的:(vue,公众号,js,h5,vant)