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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
JS delegate与live浅析
2013/12/21 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
理解Python垃圾回收机制
2016/02/12 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python使用requests.session模拟登录
2019/08/09 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
酒店值班经理的工作职责范本
2014/02/18 职场文书
表彰大会主持词
2014/03/26 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
2019个人半年工作总结
2019/06/21 职场文书
python 判断文件或文件夹是否存在
2022/03/18 Python
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android