Vue使用v-viewer插件實現(xiàn)圖片預覽和縮放和旋轉(zhuǎn)等功能(推薦)

更新時間：2023年02月09日 09:23:31 作者：小花皮豬

v-viewer是一個基于viewerjs封裝的vue圖片預覽組件,有預覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化，這篇文章主要介紹了Vue使用v-viewer插件實現(xiàn)圖片預覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下

前言

昨天不是做了一個動態(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)絡正常的話幾秒就可以下載完成

引入并使用依賴

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

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

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