当前位置:首页 >> 网络编程

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

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

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

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

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

#第一种解决办法

后来多方请教,终于请到一位大佬,为员外指点迷津。  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 实例才刚刚生成,但是不会被调用,然后在第二次触发事件的时候,才会生效。别问我怎么知道的。。。