前言

昨天不是做了一個動態(tài)的圖片展示嗎，今天就尋思著能不能完善下功能，可以通過點擊圖片的方式進行放大縮小，甚至旋轉(zhuǎn)。

圖片展示可以參考：Vue顯示圖片的幾種方式

然后我一頓收搜，發(fā)現(xiàn)了vue中有這么一款插件：v-viewer

wc，不看不知道，一看嚇一跳，這個插件居然如此nb，最主要的是，這么厲害的插件，使用其他特別簡單！

先給大家簡單科普下v-viewe這個插件吧

科普：v-viewer

簡單來說：v-viewer是一款支持vue項目中的圖片瀏覽組件，它支持圖片旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作，支持配置化.非常強大

下面的代碼，我都是用的默認配置，因為我覺得默認配置功能過于厲害，當然也根據(jù)自己的需求進行調(diào)整

官網(wǎng)目錄：v-viewer

安裝依賴

直接執(zhí)行命令：

npm install v-viewer --save

這個依賴很小，如果網(wǎng)絡(luò)正常的話幾秒就可以下載完成

引入并使用依賴

下載完成之后，就可以配置了，具體操作就是引入并使用依賴了。

找到vue項目中的main.js 文件并加入如下代碼：

// 引入Viewer插件
import VueViewer, { directive as viewerDirective } from 'v-viewer';
// 引入Viewer插件的圖片預(yù)覽器的樣式
import 'viewerjs/dist/viewer.css'; 
// 使用Viewer圖片預(yù)覽器
Vue.use(VueViewer)
// 用于圖片預(yù)覽的指令方式調(diào)用 在元素上加上會處理元素下所有的圖片,為圖片添加點擊事件,點擊即可預(yù)覽
Vue.directive('viewer', viewerDirective({
  debug: true
}));

頁面代碼使用

所有前提工作都做完之后，我們就來到了重點，讓圖片可以進行預(yù)覽，旋轉(zhuǎn)，放大縮小等

其實用了這個插件之后特別簡單，只需要給圖片這個容器一個指令，就可以擁有這些功能。

v-viewer

查看效果

然后刷新下頁面，這時候點擊圖片。

旋轉(zhuǎn)，縮小，等功能都是可以的。

其他的功能就不演示了。大家感興趣的話可以下去自己玩玩。

消除日志打印

好歸好，但是有一個問題，就是控制臺打印太多了：

這么多日志肯定是不利于開發(fā)的，所以我想著把插件相關(guān)的日志給去掉

想要解決這個問題，只能是修改源碼嘍，一般情況下，盡量還是不要碰源碼，但是這種情況，是肯定得碰的啦

打開項目的node_modules目錄，往下翻，找到v-viewer這個文件夾的dist文件夾下的v-viewer.js文件

這個就是這個插件的js代碼，作者在里面為了方便調(diào)試打印了一些日志，我們需要手動關(guān)閉：

我主要是通過控制臺的日志，收到進行ctrl+f搜索的，找到對應(yīng)的內(nèi)容進行關(guān)閉，以下我將通過大家相關(guān)日志的行號，大家找到對應(yīng)的行號進行注釋或者刪除即可，個人建議注釋而不是刪除！

以下行號只是解決插件默認展示的日志。

行號：268，315，260，223

相關(guān)截圖：

這四個地方修改完之后重啟項目，再次訪問，這次控制臺一干二凈的，是不是舒服多了！

功能也是正常支持的！

總結(jié)

這個插件我覺得太厲害了，最主要是使用起來也很簡單。大家一定要下去試試！

最新評論