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

  • 效果

    vue中实现图片全屏缩放预览_第1张图片

    点击

    vue中实现图片全屏缩放预览_第2张图片

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

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

    DEMO

    在线演示 
    Github

    你可能感兴趣的:(vue.js)