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


Posted in Javascript onApril 10, 2020

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

 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="item" />
   </li>
  </ul>
 </div>
</template>
```
js
```
data() {
    return {
      imgArr: [
         "图片地址",
         "图片地址",
         "图片地址",
         "图片地址",
         "图片地址",
      ]
    };
  },
  mounted() {
    //调用就是这么简单,直接 new 一个新 Viewer 对象即可
    const viewer = new Viewer(document.getElementById("index"), {});
  }

单个图片的使用方法其实跟上面的例子几乎一样: //html

<div class="img-box">
  <img :src="warsher_before_img" alt="" id="warsher_before_img">
</div>
//js
mounted() {
 //调用就是这么简单,直接 new 一个新 Viewer 对象即可
 const viewer = new Viewer(document.getElementById('warsher_before_img'))
}

切记,千万不要多事在事件中调用上面 mounted 中的方法,会导致在第一次触发事件的时候,Viewer 实例才刚刚生成,但是不会被调用,然后在第二次触发事件的时候,才会生效。别问我怎么知道的。。。

到此这篇关于vue+vant使用图片预览功能ImagePreview的问题解决的文章就介绍到这了,更多相关vue+vant 图片预览ImagePreview内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
Ajax异步刷新功能及简单案例
Nov 20 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
JS实现省市县三级下拉联动
Apr 10 #Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 #Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 #Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 #Javascript
javascript实现贪吃蛇经典游戏
Apr 10 #Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 #Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 #Javascript
You might like
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
改进Django中的表单的简单方法
2015/07/17 Python
python异常和文件处理机制详解
2016/07/19 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python绘制多个曲线的折线图
2020/03/23 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
python标准库os库的函数介绍
2020/02/12 Python
python MD5加密的示例
2020/10/19 Python
高校学生干部的自我评价分享
2013/11/04 职场文书
服务员岗位职责
2014/01/29 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
家长会标语
2014/06/24 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
继承权公证书范本
2015/01/23 职场文书
人事聘任通知
2015/04/21 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js