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="缩略图与大图模式">