vue中实现图片全屏缩放预览

基于photoswipe的vue图片全屏缩放预览插件：vue-photo-preview

说明

1.简化了photoswipe的默认设置
2.取消了图片需设定尺寸的要求
3.默认关闭了分享按钮
4.简化了html结构

安装

npm install vue-photo-preview --save

 main.js引入

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

在image标签中加入 preview

<li class="list-li " v-for="(item, index) in imgCar">
    <img :preview="index" :src="'http://www.tejialuntai.com/data/repair/'+item.img"/>
</li>

效果

点击

异步图片放大失效的解决方法

官方提供的异步图片加载的话，解决的方式是加transition

DEMO

在线演示 
Github