Vue使用v-viewer插件實現圖片放大縮小的功能

今天無意中發現一個比較有趣的插件v-viewer,可以實現圖片的放大縮小，旋轉，圖片集預覽，全屏預覽等功能非常全面。

效果：

 

如何使用

1、安裝依賴
npm install v-viewer --save
2、在main.js中全局引入
import Viewer from ‘v-viewer’
import ‘viewerjs/dist/viewer.css’
Vue.use(Viewer)
Viewer.setDefaults({
Options: { ‘inline’: true, ‘button’: true, ‘navbar’: true, ‘title’: true, ‘toolbar’: true, ‘tooltip’: true, ‘movable’: true, ‘zoomable’: true, ‘rotatable’: true, ‘scalable’: true, ‘transition’: true, ‘fullscreen’: true, ‘keyboard’: true, ‘url’: ‘data-source’ }
})

 

屬性

 

 

頁面中使用：注意，這里的images務必是Array類型，否則會報錯

 

 

如果這里的images不是Array類型，就會報錯：

 

如果只需要預覽一張圖片

注意每次預覽時把images清空否則之前的圖片路徑也在其中，就像這樣：

 

 

參考：https://blog.csdn.net/jasmine0178/article/details/103494864

 

https://github.com/mirari/v-viewer?spm=a2c4e.10696291.0.0.52f319a4bkZfKM