这篇文章主要讲解了解决vue+vant使用图片预览功能ImagePreview的问题,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图:
着实让员外百思不其解,在调用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], }); }, } }
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前标题:解决vue+vant使用图片预览功能ImagePreview的问题-创新互联
分享URL:https://www.cdcxhl.com/article6/hjjog.html
成都网站建设公司_创新互联,为您提供建站公司、网站维护、App设计、电子商务、品牌网站建设、网站策划
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联