如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：
着实让员外百思不其解，在调用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],
});
},
}
}
#第二种解决办法
这个办法就与 vant 无关了，员外使用的是 viewerjs 插件，这是一款专门针对图片预览打造的插件，功能要比 vant 自带的全得多，而且自带很多钩子功能，如果您需求比较复杂的话，那使用起来真的是太方便了。 ##使用方法： 安装依赖 npm i viewerjs -S 在 main.js中引入并设置好各种参数，当然如果您对效果要求不高，可以不设，许多默认的也够您使用了。里面有许多不用的功能，员外都 false 了。
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Viewer.setDefaults({
'inline':false,
'button':true, //右上角按钮
"navbar": false, //底部缩略图
"title": false, //当前图片标题
"toolbar": false, //底部工具栏
"tooltip": false, //显示缩放百分比
"movable": true, //是否可以移动
"zoomable": true, //是否可以缩放
"rotatable": true, //是否可旋转
"scalable": true, //是否可翻转
"transition": true, //使用 CSS3 过度
"fullscreen": true, //播放时是否全屏
"keyboard": false, //是否支持键盘
"url": "data-source",
ready: function (e) {
console.log(e.type,'组件以初始化');
},
show: function (e) {
console.log(e.type,'图片显示开始');
},
shown: function (e) {
console.log(e.type,'图片显示结束');
},
hide: function (e) {
console.log(e.type,'图片隐藏完成');
},
hidden: function (e) {
console.log(e.type,'图片隐藏结束');
},
view: function (e) {
console.log(e.type,'视图开始');
},
viewed: function (e) {
console.log(e.type,'视图结束');
},
zoom: function (e) {
console.log(e.type,'图片缩放开始');
},
zoomed: function (e) {
console.log(e.type,'图片缩放结束');
}
});
设置好之后即可直接使用了。这里有一个小坑，员外在网上查了挺多 demo的，大多数的教程里面都是教您如何预览多张图片，但是员外的需要是只需要预览一张，所以在使用的时候也是绕了一点弯子的。 在 .vue 组件中使用： 首先员外先介绍一下多图片的使用方法： html中：
<template>
<div id="index">
<ul>
<li v-for="(item, index) in imgArr" :key="index">
<img :src="/UploadFiles/2021-04-02/item">
单个图片的使用方法其实跟上面的例子几乎一样： //html
<div class="img-box">
<img :src="/UploadFiles/2021-04-02/warsher_before_img">
切记，千万不要多事在事件中调用上面 mounted 中的方法，会导致在第一次触发事件的时候，Viewer 实例才刚刚生成，但是不会被调用，然后在第二次触发事件的时候，才会生效。别问我怎么知道的。。。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。