vue-preview是一個(gè)常用的圖片查看器，微博網(wǎng)頁版就是用的這個(gè)插件：

我在項(xiàng)目中也用過這個(gè)插件，總體來說，還是比較滿意。但是缺少一個(gè)圖片旋轉(zhuǎn)功能。

?

安裝使用

第一步：安裝

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

第三步：使用

// 定義預(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); }

?

動(dòng)態(tài)獲取圖片寬高

如果圖片列表資源是從服務(wù)器獲取，則需要先獲取圖片的真實(shí)寬高，具體代碼如下：

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

?

新增圖片旋轉(zhuǎn)功能

默認(rèn)的功能有全屏、放大、分享、圖片切換等，有時(shí)候我們還需要圖片旋轉(zhuǎn)功能，怎么辦呢？那只能自己動(dòng)手改插件了。

?

第一步：添加旋轉(zhuǎn)圖標(biāo)

圖標(biāo)文件路徑：node_modules\photoswipe\dist\default-skin

原來只有前面8個(gè)圖片，后面那個(gè)稍微大一點(diǎn)的旋轉(zhuǎn)圖標(biāo)是我加上去的，當(dāng)然你也可以把尺寸設(shè)置為和原來的一樣。

?

第二步：添加旋轉(zhuǎn)按鈕到頁面

頁面文件路徑：node_modules\vue-preview\src\plugins\preview\preview.vue

<button class="pswp__button pswp__button--rotate" title="旋轉(zhuǎn)" @click="imgRotateFn"></button>

?

第三步：添加旋轉(zhuǎn)按鈕的樣式

樣式文件路徑：node_modules\photoswipe\dist\default-skin

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

?

第四步：實(shí)現(xiàn)旋轉(zhuǎn)方法

文件路徑：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)';}}

這里我只貼出了關(guān)鍵代碼，需要你自己做瀏覽器兼容，以及切換圖片時(shí)，應(yīng)該將圖片角度設(shè)置為0等。

?

測(cè)試結(jié)果

測(cè)試沒有問題，終于可以下班了，哈哈哈。

?

Tips：懶得自己動(dòng)手改插件的伙伴，可以在樓主的GitHub倉庫下載改好后的文件，在你安裝好 vue-preview 后用“attachment”文件夾中的三個(gè)文件替換你項(xiàng)目中的對(duì)應(yīng)文件就擁有“旋轉(zhuǎn)”功能了。GitHub地址：https://github.com/xiongjun0812/vue-preview

?

今天就分享到這里，有問題歡迎留言交流，或關(guān)注樓主微信公眾號(hào)：上班熊的環(huán)球夢(mèng)。文中表述僅代表個(gè)人觀點(diǎn)，如果有更好的方法，歡迎分享。

?

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的vue-preview动态获取图片宽高并增加旋转功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。