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

女爷i 2021-07-25 21:20 710阅读 0赞

基于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>

效果

![20190914123746863.png][]

点击

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdfemhpaGFvNjkyODE3_size_16_color_FFFFFF_t_70][]

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

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

## DEMO ##

[在线演示][Link 1]   
[Github][]

[20190914123746863.png]: /images/20210725/4b2596e641db4a42b74867f03817d4e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdfemhpaGFvNjkyODE3_size_16_color_FFFFFF_t_70]: /images/20210725/824210892d4e4ff49799ca4829cd434e.png
[Link 1]: https://826327700.github.io/vue-photo-preview/demo/
[Github]: https://826327700.github.io/vue-photo-preview

发表评论取消回复

表情：

评论列表（有 0 条评论，710人围观）

还没有评论，来说两句吧...

相关阅读

相关使用viewerJs替换fastadmin中表格图片预览功能，实现鼠标缩放旋转等功能

替换fastadmin中表格图片预览功能原因局部替换解决方案： 1.下载 2.使用 2.1. 在public

本是古典何须时尚/ 2024年04月01日 16:11/ 0 赞/ 13 阅读

相关如何实现移动端图片预览、缩放、拖动

要在移动端实现图片预览、缩放和拖动，你可以使用如下方法： 1. 使用现有的 JavaScript 库，如 Swiper、PhotoSwipe 等。这些库已经封装了大部分的功

Myth丶恋晨/ 2024年03月27日 12:15/ 0 赞/ 4 阅读

相关 vue图片缩略图及图片预览功能

前言上次有个需求，是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的，几句代码可以搞定，也不需要什么额外的插件。效果如下： vue显示图片缩略

ゞ浴缸里的玫瑰/ 2022年12月31日 03:22/ 0 赞/ 669 阅读

相关兼容IE、新版Chrome、Firefox，实现本地图片等比例缩放预览

以前转载过一篇《[兼容IE8、火狐的本地图片预览+等比例缩放][IE8]》的文章，时至今日在新版的Chrome和Firefox上已经不能用了，原因getAsDataURL方法已

雨点打透心脏的1/2处/ 2022年06月14日 04:08/ 0 赞/ 146 阅读

相关 vue 图片预览组件

vue-photo-preview 转自 https://npm.taobao.org/package/vue-photo-preview 安

阳光穿透心脏的1/2处/ 2022年05月24日 13:45/ 0 赞/ 393 阅读

相关全屏图片等比例缩放

/ 大图自动等比例缩放。 / var bxsliderImgs = $(".bxslider").add(".b

Bertha 。/ 2022年01月16日 10:37/ 0 赞/ 284 阅读

相关 vue项目中使用screenfull.js实现全屏，缩放功能

1. 第一步安装依赖 `cnpm install --save screenfull` 2. 封装组件 components下创建文件夹Screenfull 下创建文件in

Bertha 。/ 2021年12月05日 12:57/ 0 赞/ 665 阅读

相关 Android之实现多张图片点击预览(支持放缩)和滑动

1 需求多张图片通过recycleView展示，然后点击具体一张图片支持预览(支持放缩)和滑动![watermark_type_ZmFuZ3poZW5naGVpdGk_

野性酷女/ 2021年09月24日 04:24/ 0 赞/ 281 阅读

相关网页全屏缩放代码

定义一个点击事件，方法体中加入以下代码即可实现，Vue、html都可使用 if (!document.fullscreenElement &&

谁借莪１个温暖的怀抱￠/ 2021年09月23日 10:20/ 0 赞/ 323 阅读

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

基于photoswipe的vue图片全屏缩放预览插件：vue-photo-preview 说明 1.简化了photoswipe的默认设置 2.取消了图片需设定尺寸的

女爷i/ 2021年07月25日 21:20/ 0 赞/ 711 阅读