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

这篇文章主要讲解了解决vue + vant使用图片预览功能ImagePreview的问题,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

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

,

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

进口{ImagePreview} & # 39; vant& # 39;; 　　出口默认{ 　　数据(){ 　　返回{ 　　active_: & # 39; & # 39;//切换标签所对应的状态数字 　　instance_before: & # 39; & # 39; 　　instance_after: & # 39; & # 39; 　　} 　　}，//在路由离开的时候,关闭预览的图片 　　beforeRouteLeave(下),从{ 　　如果这一点。active_==0) { 　　this.instance_before.close (); 　　其他}{ 　　this.instance_after.close (); 　　} 　　next (); 　　}， 　　方法:{//查看图片 　　show_before_img () { 　　这一点。instance_before=ImagePreview ({ 　　图片:[this.warsher_brfore], 　　}）; 　　}， 　　show_after_img () { 　　这一点。instance_after=ImagePreview ({ 　　图片:[this.warsher_after], 　　}）; 　　}， 　　} 　　}

,这个办法就与vant无关了,员外使用的是viewerjs插件,这是一款专门针对图片预览打造的插件,功能要比vant自带的全得多,而且自带很多钩子功能,如果您需求比较复杂的话,那使用起来真的是太方便了只# #使用方法:安装依赖npm我viewerjs -S 在主要。js中引入并设置好各种参数,当然如果您对效果要求不高,可以不设,许多默认的也够您使用了。里面有许多不用的功能,员外都假了只

从& # 39;进口观众v-viewer& # 39;
　　进口& # 39;viewerjs/dist/viewer.css& # 39;
　　
　　Viewer.setDefaults ({
　　& # 39;内联# 39;:假的,
　　& # 39;按钮# 39;:真的,//右上角按钮
　　“navbar":假的,//底部缩略图
　　“title":假的,//当前图片标题
　　“toolbar":假的,//底部工具栏
　　“tooltip":假的,//显示缩放百分比
　　“movable":真的,//是否可以移动
　　“zoomable":真的,//是否可以缩放
　　“rotatable":真的,//是否可旋转
　　“scalable":真的,//是否可翻转
　　“transition":真的,//使用CSS3过度
　　“fullscreen":真的,//播放时是否全屏
　　“keyboard":假的,//是否支持键盘
　　“url":“data-source"
　　准备:函数(e) {
　　console.log (e.type & # 39;组件以初始化& # 39;);
　　}，
　　显示:函数(e) {
　　console.log (e.type & # 39;图片显示开始& # 39;);
　　}，
　　显示:函数(e) {
　　console.log (e.type & # 39;图片显示结束& # 39;);
　　}，
　　隐藏:函数(e) {
　　console.log (e.type & # 39;图片隐藏完成& # 39;);
　　}，
　　隐藏:函数(e) {
　　console.log (e.type & # 39;图片隐藏结束& # 39;);
　　}，
　　观点:函数(e) {
　　console.log (e.type & # 39;视图开始& # 39;);
　　}，
　　认为:函数(e) {
　　console.log (e.type & # 39;视图结束& # 39;);
　　}，
　　变焦:函数(e) {
　　console.log (e.type & # 39;图片缩放开始& # 39;);
　　}，
　　缩放:函数(e) {
　　console.log (e.type & # 39;图片缩放结束& # 39;);
　　}
　　}）;
　　
　　
解决vue + vant使用图片预览功能ImagePreview的问题