快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

科普：v-viewer

簡單來說：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)用 在元素上加上會處理元素下所有的圖片,為圖片添加點(diǎn)擊事件,點(diǎn)擊即可預(yù)覽
Vue.directive('viewer', viewerDirective({
  debug: true
}));