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

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

着实让员外百思不其解,在调用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="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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+vant实现商品列表批量倒计时功能

    最近因为一个项目需要用到商品批量倒计时,当时使用vant封装好的组件CountDown编写 起初不知道"timeData"这个对象只需要传time的时间戳就可以自动生成,走了一大波弯路,现在想想也是醉了 最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题,只获取了本地时间 new Date().getTime(),然后发现这个不行,只要用户修改下手机本地时间,这个倒计时就不行了,有安全隐患,在网上也搜了一些相关知识,但都不尽人意,故想写这一篇文章避免大家再走我之前的弯路! 废话不

  • 详解mpvue中使用vant时需要注意的onChange事件的坑

    最近用了一下Vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面的collapse折叠面板,官网文档里面介绍的使用方法是这样的 1.在 app.json 或 index.json 中引入组件 "usingComponents": { "van-collapse": "path/to/vant-weapp/dist/collapse/index", "van-collapse-

  • 详解VUE项目中安装和使用vant组件

    Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

  • 详解vantUI框架在vue项目中的应用踩坑

    1.订单提交地址等组件的应用. 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块: <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default show-searc

  • Vant的安装和配合引入Vue.js项目里的方法步骤

    1.安装vant npm i vant -S:这是简写形式. npm install vant --save:这是完整写法. 如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装. npm install vant --save --registry=https://registry.npm.taobao.org 淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成 2.1使用babel-plugin-import(推荐) babel-plugin-impo

  • vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会自动加载一次,可以:immediate-check="false" 这样设置一下,页面加载完成后就不会自动加载一次了 ) 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发

  • Vue 用Vant实现时间选择器的示例代码

    1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker 引入Vant中DatetimePicker组件(全局引入后可直接使用) import Vue from 'vue'; import { DatetimePicker } from 'vant' Vue.use(DatetimePicker); 关键使用代码(结合vant组件Popup的底部弹出层一起使用) <van-popup v-model="dateShow&

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

    如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不其解,在调用vant 的 ImagePreview图片预览组件中,没有html,有的只是引入ImagePreview 和js的调用.在这种情况下,员外是想自己添加任何方法都没法实现的,同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview  也实现不了,因为根

  • vue实现压缩图片预览并上传功能(promise封装)

    本文实例为大家分享了vue实现压缩图片预览并上传的具体代码,供大家参考,具体内容如下 主要用到filereader.canvas 以及 formdata 这三个h5的api 过程大致分为三步: 用户使用input file上传图片的时候,用filereader读取用户上传的图片数据(base64格式) 把图片数据传入img对象,然后将img绘制到canvas上,再调用canvas.toDataURL对图片进行压缩 获取到压缩后的base64格式图片数据,转成二进制塞入formdata,再通过Xm

  • input file上传 图片预览功能实例代码

    input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>

  • javascript实现的图片预览功能

    本文实例讲述了javascript实现的图片预览功能.分享给大家供大家参考,具体如下: 1.将下面的代码复制到<head>内 <script> /* Thumbnail image viewer- ?Dynamic Drive (www.dynamicdrive.com) For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ function

  • 如何通过js实现图片预览功能【附实例代码】

    实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • 轻松实现js图片预览功能

    本文实例讲述了js实现图片预览的方法,自己以前写的一个,代码比较简洁,分享给大家供大家参考.具体如下: 一.效果预览 效果图: 二.实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js图片预览功能</title> <script language=java

  • Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)

    本文实例讲述了Android编程滑动效果之Gallery+GridView实现图片预览功能.分享给大家供大家参考,具体如下: Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果. 本示例通过GridView和Gallery两个控件,模仿实现一个完整的仿Gallery图像集的图片浏览效果.效果图如下: 1.GridView 首先,自定义一个GridImageAdapter图片适配器

  • 微信小程序实现图片预览功能

    本文为大家分享了微信小程序实现图片预览的具体代码,供大家参考,具体内容如下 效果图 原理 使用wx.chooseImage选择本地图片: 使用wx.previewImage预览图片. WXML <view> <button bindtap="previewImage" type="primary">图片上传预览</button> <view class="tui-content"> <imag

  • JS使用H5实现图片预览功能

    JS使用H5实现上传图片预览的功能,以下是代码的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传预览</title> <script type="text/javascript"> //预览图片,参数说明:第一个参数:要预览的file对象,第二个参数:预览的img标签的id名称 function

  • viewer.js实现图片预览功能

    viewer.js是实现图片预览的插件库,要在项目中使用它里面的功能,首先要引入两个文件: 1.css文件:viewer.css 2.js文件:viewer.js 可以在这里下载 下载后,在html中引入 <link rel="stylesheet" type="text/css" href="./viewer.css" rel="external nofollow" /> <script src="

随机推荐