前言

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

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

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

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

先給大家簡(jiǎn)單科普下v-viewe這個(gè)插件吧

科普：v-viewer

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

下面的代碼，我都是用的默認(rèn)配置，因?yàn)槲矣X得默認(rèn)配置功能過于厲害，當(dāng)然也根據(jù)自己的需求進(jìn)行調(diào)整

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

安裝依賴

直接執(zhí)行命令：

npm install v-viewer --save

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

引入并使用依賴

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

找到vue項(xiàng)目中的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)用 在元素上加上會(huì)處理元素下所有的圖片,為圖片添加點(diǎn)擊事件,點(diǎn)擊即可預(yù)覽
Vue.directive('viewer', viewerDirective({
  debug: true
}));

頁(yè)面代碼使用

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

其實(shí)用了這個(gè)插件之后特別簡(jiǎn)單，只需要給圖片這個(gè)容器一個(gè)指令，就可以擁有這些功能。

v-viewer

查看效果

然后刷新下頁(yè)面，這時(shí)候點(diǎn)擊圖片。

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

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

消除日志打印

好歸好，但是有一個(gè)問題，就是控制臺(tái)打印太多了：

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

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

打開項(xiàng)目的node_modules目錄，往下翻，找到v-viewer這個(gè)文件夾的dist文件夾下的v-viewer.js文件

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

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

以下行號(hào)只是解決插件默認(rèn)展示的日志。

行號(hào)：268，315，260，223

相關(guān)截圖：

這四個(gè)地方修改完之后重啟項(xiàng)目，再次訪問，這次控制臺(tái)一干二凈的，是不是舒服多了！

功能也是正常支持的！

總結(jié)

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

最新評(píng)論