vue-preview是一個常用的圖片檢視器，微博網頁版就是用的這個外掛：

我在專案中也用過這個外掛，總體來說，還是比較滿意。但是缺少一個圖片旋轉功能。

安裝使用

第一步：安裝

npm i vue-preview -S

第二步：引用配置

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
})

第三步：使用

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

動態獲取圖片寬高

如果圖片列表資源是從伺服器獲取，則需要先獲取圖片的真實寬高，具體程式碼如下：

this. previewlist = []; //檢視列表
let imglist = […]; //從伺服器獲取的圖片地址列表
show (index) {
  for (let i = 0; i < imglist.length; i++) {
    // 獲取圖片實際大小
    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都是按照順序執行的。但是我們可能讓該語句後面的語句執行完再執行本身，用setTimeout延時0ms來實現。
  setTimeout(() => {
    this.$preview.open(index,this.previewlist);
  },0);
}

新增圖片旋轉功能

預設的功能有全屏、放大、分享、圖片切換等，有時候我們還需要圖片旋轉功能，怎麼辦呢？那隻能自己動手改外掛了。

第一步：新增旋轉圖示

圖示檔案路徑：node_modules\photoswipe\dist\default-skin

原來只有前面8個圖片，後面那個稍微大一點的旋轉圖示是我加上去的，當然你也可以把尺寸設定為和原來的一樣。

第二步：新增旋轉按鈕到頁面

頁面檔案路徑：node_modules\vue-preview\src\plugins\preview\preview.vue

<button class="pswp__button pswp__button--rotate" title="旋轉" @click="imgRotateFn"></button>

第三步：新增旋轉按鈕的樣式

樣式檔案路徑：node_modules\photoswipe\dist\default-skin

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

第四步：實現旋轉方法

檔案路徑：node_modules\vue-preview\src\plugins\preview\preview.vue

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)';
   }
 }

這裡我只貼出了關鍵程式碼，需要你自己做瀏覽器相容，以及切換圖片時，應該將圖片角度設定為0等。

測試結果

測試沒有問題，終於可以下班了，哈哈哈。

Tips：懶得自己動手改外掛的夥伴，可以在樓主的GitHub倉庫下載改好後的檔案，在你安裝好 vue-preview 後用“attachment”資料夾中的三個檔案替換你專案中的對應檔案就擁有“旋轉”功能了。GitHub地址：https://github.com/xiongjun0812/vue-preview

今天就分享到這裡，有問題歡迎留言交流，希望能給大家一個參考，也希望大家多多支援我們。