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 相关文章推荐
script不刷新页面的联动前后代码
Sep 18 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
js电话号码验证方法
Sep 28 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 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
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
js继承的实现代码
2010/08/05 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
python实现web方式logview的方法
2015/08/10 Python
python实现Zabbix-API监控
2018/09/17 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Django 反向生成url实例详解
2019/07/30 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
文明市民先进事迹
2014/05/15 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
承诺函范文
2015/01/21 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android