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 实例才刚刚生成,但是不会被调用,然后在第二次触发事件的时候,才会生效。别问我怎么知道的。。。
转载于:https://juejin.im/post/5cbb28c4f265da0368145904
vue+vant使用图片预览功能ImagePreview的问题相关推荐
- vue图片缩略图及图片预览功能
前言 上次有个需求,是要给图片做个缩略图以及预览功能.其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件. 效果如下: vue显示图片缩略图 vue显示图片预览功能 核心代码 两 ...
- django admin后台列表页、修改/详情页图片预览功能
目录 一.admin后台列表页的图片预览功能 二.admin后台修改/详情页图片预览功能 1,添加html前端代码 2.在admin.py文件中添加以下代码: 1.列表页图片问题:在admin列表页中 ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- 【若依(ruoyi)】表格图片预览功能图片超宽、超高问题
前言 若依(ruoyi): v4.3 360极速浏览器 12.0.1550.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 2004 (Build 19041.5 ...
- html预览图片的功能,javascript实现的图片预览功能
本文实例讲述了javascript实现的图片预览功能.分享给大家供大家参考,具体如下: 1.将下面的代码复制到 内 /* Thumbnail image viewer- ?Dynamic Drive ...
- 微信小程序实现图片预览功能
小程序有提供预览图片的wx.previewImage方法 先在页面上放上图片标签 <imagecatch:tap="preview"data-src = 'https://s ...
- 最简单的图片预览功能【兼容IE8】
最简单的图片预览功能[兼容IE8] 将如下代码放入<head></head>中: <html><head> <script type=&quo ...
- 带图片预览功能的图片上传
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- pc 图片预览放大 端vue_移动端Vue.js的图片预览组件,支持放缩、滑动功能!
功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏. 注:touch事件请手机预览 源码分享 组件参数 data() { return { loading: 2, // 1成功 2 ...
最新文章
- swift的基础语法(二)
- 外部链接linux下的mysql,Linux下mysql实现远程链接
- linux之tr命令使用和总结
- t检验的p值对照表_论文数据分析实战 | 如何对汇总数据进行t检验
- 面试题2021-2-24
- 百度飞桨开源Open Images Dataset V5目标检测比赛最好单模型MSF-DET
- 用curl自动登录HTTPS站点
- 关于未在本地计算机上注册“Microsoft.Jet.OleDb.4.0”提供程序的解决办法
- oracle 获取多个序列值,一次性获取多个oracle序列值问题
- 带你去看——WRC 2016 世界机器人博览会
- Odin学习1 属性框标签
- CentOS修改时间和时区
- 常用英语高频词汇android,英语常用高频词汇
- 云班课使用浏览器倍速播放插件
- 【蓝桥杯单片机(14)】PWM波实现呼吸灯
- let和expr的区别
- 输入一个数n,然后打印出2的n次方
- Notepad快捷键Shift+Enter失效,无法启用向前搜索。
- excel进阶:如何快速自动填充空白单元格上一行的内容
- 核桃、石头和榴莲——中年男人の致富经