vue項目預覽圖片(只適用於微信瀏覽器開發)

此預覽圖片使用的是微信JSSDK中的wx.previewImage接口，可是咱們通常vue項目不使用jQuery，因此基於原聲封裝了一個方法,把下面的一段代碼放到util.js(公用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.$util.goPreviewImg(this.$el);
}
複製代碼

這個時候就能夠在手機上查看效果了。

tips：

1. base64位圖片不支持預覽
2. 須要先引入js文件 //res.wx.qq.com/open/js/jweixin-1.4.0.js

微信開發文檔地址