Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)
前言
昨天不是做了一個(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 }));
頁面代碼使用
所有前提工作都做完之后,我們就來到了重點(diǎn),讓圖片可以進(jìn)行預(yù)覽,旋轉(zhuǎn),放大縮小等
其實(shí)用了這個(gè)插件之后特別簡(jiǎn)單,只需要給圖片這個(gè)容器一個(gè)指令,就可以擁有這些功能。
v-viewer
查看效果
然后刷新下頁面,這時(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)單。大家一定要下去試試!
相關(guān)文章
Vue+webpack+Element 兼容問題總結(jié)(小結(jié))
這篇文章主要介紹了Vue+webpack+Element 兼容問題總結(jié)(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺(tái)接口
這篇文章主要介紹了vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺(tái)接口問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Vant中Popover氣泡彈出框位置錯(cuò)亂問題解決
這篇文章主要為大家介紹了Vant中Popover氣泡彈出框位置錯(cuò)亂問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06ElementPlus表單rules校驗(yàn)的方法步驟
相信大家經(jīng)常都會(huì)遇到要處理表單驗(yàn)證的環(huán)節(jié),而我在最近的項(xiàng)目中也遇到需要做表單驗(yàn)證的業(yè)務(wù),下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗(yàn)的方法步驟,需要的朋友可以參考下2023-04-04在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03