vue项目预览图片(只适用于微信浏览器开发)

深藏阁楼爱情的钟 2024-04-18 16:31 63阅读 0赞

此预览图片使用的是微信JSSDK中的wx.previewImage接口，但是我们一般vue项目不使用jQuery，所以基于原生封装了一个方法,把下面的一段代码放到util.js(公用js)里  
引入微信sdk

import wx from "weixin-js-sdk";

我是自定义一个混合开发的方法，在main.js中引用，全局都可以直接调用该方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70]

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：

1.  base64位图片不支持预览
2.  需要先引入js文件 //res.wx.qq.com/open/js/jweixin-1.4.0.js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f920b39c5e0f412980981c75ec8e65de.jpg