vue 图片预览

微信中预览图片(类似微信支付)

1.微信的jssdk
2.WeixinJSBridgeReady

 handleToSwiper(index) {
   this.current = index
   this.wxReady(index)
 },
 wxSwiper(index){
   let newImgs = this.newImgs.map((item) => {
     return this.host + item.filename + this.previewParameter //添加的七牛图片的参数,根据自己项目的需求添加
   })
   WeixinJSBridge.invoke('imagePreview', {
     current: newImgs[index],
     urls:newImgs  
     }
   )
 },
 wxReady(index){
   let that = this
   if (typeof WeixinJSBridge == "undefined"){
     if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', that.wxSwiper(index), false);
     }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', that.wxSwiper(index));
       document.attachEvent('onWeixinJSBridgeReady', that.wxSwiper(index));
     }
   }else{
     that.wxSwiper(index);
   }
 },

七牛图片处理 例如:?imageView2/1/w/200/h/200/interlace/1/q/100'参数,让图片,无论是横图还是竖图在n * n大小的范围你不变形的显示出来

你可能感兴趣的:(vue 图片预览)