import VuePreview from 'vue-preview'
Vue.use(VuePreview)
Vue.use(preview, {
 mainClass: 'pswp--minimal--dark',
 barsSize: {top: 0, bottom: 0},
 captionEl: false,
 fullscreenEl: false,
 shareEl: false,
 bgOpacity: 0.85,
 tapToClose: true,
 tapToToggleControls: false
})

// 定義預(yù)覽圖片列表
previewlist: [
  {
    src: ‘./pic01.jpg',
    w: 1200,
    h: 900
  },
  {
    src: ‘./pic01.jpg',
    w: 1200,
    h: 900
  }
]
 
// 給圖片添加“preview-img”類(必須添加且要同名)，以及綁定“show”方法
<img :src="decodeURIComponent(item.name)" class="preview-img" @click="show(index)">
 
// 點(diǎn)擊圖片觸發(fā)預(yù)覽方法
show (index) {
  this.$preview.open(index, this. previewlist);
}

this. previewlist = []; //查看列表
let imglist = […]; //從服務(wù)器獲取的圖片地址列表
show (index) {
  for (let i = 0; i < imglist.length; i++) {
    // 獲取圖片實(shí)際大小
    let newImage = {};
    let img = new Image();
    img.src = imglist[i];
    img.onload = function () {
      newImage.src = imglist[i];
      newImage.w = img.width;
      newImage.h = img.height;
    };
    this.previewlist.push(newImage);
  }
  // 正常情況下javascript都是按照順序執(zhí)行的。但是我們可能讓該語句后面的語句執(zhí)行完再執(zhí)行本身，用setTimeout延時(shí)0ms來實(shí)現(xiàn)。
  setTimeout(() => {
    this.$preview.open(index, this.previewlist);
  }, 0);
}

.pswp__button--rotate {
 background-position: -176px 0;
}

imgRotateFn () {
   this.angle+=90;
   let imgNode = document.getElementsByClassName('pswp__img');
   for (let i = 0; i<imgNode.length; i++) {
      imgNode[i].style.WebkitTransform = 'rotate('+this.angle+'deg)';
   }
 }