vue中使用查看大圖(vue-photo-preview)

效果圖

點擊前

 

 

點擊后

 

 

1、介紹

　　最新需求要實現根據鼠標滾輪實現放大縮小 又找了另外一個組件 https://www.cnblogs.com/qhantime/p/13744965.html

　　基於photoswipe的vue圖片預覽插件

　　地址https://developer.aliyun.com/mirror/npm/package/vue-photo-preview

　　GitHub: https://github.com/826327700/vue-photo-preview?spm=a2c6h.14275010.0.0.40676d0cWoYVHs

2、安裝

　　npm install vue-photo-preview --save

3、引入

　　Main中引入

　　import preview from 'vue-photo-preview'
　　import 'vue-photo-preview/dist/skin.css'
　　Vue.use(preview)

4、使用

　　//在img標簽添加preview屬性 preview值相同即表示為同一組

　　//分組
　　　　<img src="xxx.jpg" preview="1" preview-text="描述文字">
　　　　<img src="xxx.jpg" preview="1" preview-text="描述文字">

　　//最新用法

　　　　<img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="縮略圖與大圖模式">