此预览图片使用的是微信JSSDK中的wx.previewImage接口,但是我们一般vue项目不使用jQuery,所以基于原生封装了一个方法,把下面的一段代码放到util.js(公用js)里
引入微信sdk
import wx from "weixin-js-sdk";
我是自定义一个混合开发的方法,在main.js中引用,全局都可以直接调用该方法
goPreviewImg(el){
//el 当前组件的根元素
el.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
var oElements = el.getElementsByTagName('*');
if(target.nodeName.toLowerCase() == 'img'&&target.className.indexOf('preview_img') != -1){
var imgArray = [];
var curImageSrc =target.src;
for(var i=0;i<oElements.length;i++){
if(oElements[i].className.indexOf('preview_img') != -1&&oElements[i].nodeName.toLowerCase() == 'img'){
imgArray.push(oElements[i].src);
}
}
wx.previewImage({
current: curImageSrc,
urls: imgArray
});
}
}
},
使用方法:哪一个图片需要预览 就给img加上 calss=preview_img ,类名可以自己定义,但需要跟方法里一致。在mounted生命周期里面调用。
<img src="xxxxx.jpg" class="preview_img" />
mounted(){
//this.$el当前组件的根元素
this.goPreviewImg(this.$el);
手机就可以查看当前的预览图片了
tips:
- base64位图片不支持预览
- 需要先引入js文件 //res.wx.qq.com/open/js/jweixin-1.4.0.js