Vue 移动端 previewer实现图片放大预览

简述

本文主要讲述，vue在手机移动端如何实现对小图进行放大查看预览。类似于朋友圈的照片查看。

可用工具

1、npm安装，npm i vue-preview -S

2、使用一些Vue的UI组件框架自带的，如vux、vonic、Mint UI等自带的preview

效果图

因为图片太jb大了，放在文章中，排版太丑，点击链接，跳转看看吧。
小图模式：(https://img-blog.csdn.net/20180725094952768?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlbml1c195eW0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
大图预览：(https://img-blog.csdn.net/20180725095044337?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlbml1c195eW0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

实现代码

（一）HTML

<div v-show="listDatas && listDatas.length>0">
<!-- 九宫格小图预览，没张图战三分之一，imgWidth为通过实时手机屏幕获取到图片宽高 --><img class="previewer-demo-img" v-for="(item, index) in listDatas" :src="item.src" width="100" @click="showImgs(index)" :style="{width: imgWidth, height: imgWidth}">
</div>
<div v-show="listDatas && listDatas.length==0"><span style="font-size: 12px;color:#8f8e94;">暂无证明文件</span>
</div>
<div v-transfer-dom><!-- previewer配置(npm i vue-preview) - (或者相关框架组件) --><previewer :list="listDatas" ref="previewer" :options="options"></previewer>
</div>

（二）js

data() {return {imgWidth: '375px',listDatas: [],options: { //需正确配置getThumbBoundsFn (index) {let thumbnail = document.querySelectorAll('.previewer-demo-img')[index];let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;let rect = thumbnail.getBoundingClientRect()return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}}}}
},
mounted() {//根据实际手机屏幕 获取图片宽高this.imgWidth = parseInt((Number(window.screen.width) - 45) / 3) + 'px';
},
methods: {showImgs (index) { //显示特定index的图片，使用refthis.$refs.previewer.show(index)},loaGongkeSearck(searchFlag) { // 获取图片路径，通过base64转换显示。var params = {appealid: this.$route.query.appealid,projid: this.$store.state.core.loginFormInfo.projId,orgid: this.$store.state.core.loginFormInfo.orgid,appcode: this.$store.state.core.loginFormInfo.appcode}this.$http.post(this.HOST+"/online/queryAppeal.do", params,{emulateJSON:true}).then(function(response){if (response.data.data.attach_path && response.data.data.attach_path.length>0) {for (var i = 0; i < response.data.data.attach_path.length; i++) {this.listDatas.push({msrc: 'data:image/jpeg;base64,' + response.data.data.attach_path[i],src: 'data:image/jpeg;base64,' + response.data.data.attach_path[i],w: 900,h: 1200,})}}}}, function(response){})
},
}

结束语

Vue 移动端 previewer实现图片放大预览。

Vue 移动端 previewer实现图片放大预览相关推荐

微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...
jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
Axure RP9——【图片放大预览效果】
图片放大预览效果目录 I.实现效果 II.实现步骤 I.实现效果一般适用于做电商平台图片的放大预览,以此更方便我们看清内容细节. 鼠标停留在商品大图时,会出现一个预览区域,并且右侧会出现预览区域的 ...
Chrome 扩展程序——Imagus：图片放大预览工具
主要介绍 Imagus 的功能及应用,Imagus 是一款简单实用的图片放大预览工具. 主要功能 Imagus 的功能非常单一,就是在浏览网页时,当鼠标悬停到一张图片后,会自动放大图片,进行预览,这在 ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
小程序实现图片放大预览功能
uniapp 微信小程序实现图片放大预览功能实现效果图如下主要实现代码 <view class="text_img"><image :src="i ...
html js 图片放大效果,JavaScript实现图片放大预览效果
代码实现: Document .preview-img { position: relative; height: 398px; } .mask { display: none; position: ...
微信小程序：收藏、客服、分享、加入购物车、图片放大预览
微信小程序:收藏.客服.分享.加入购物车.图片放大预览微信小程序包含功能 ·轮播 ·图片放大预览 ·收藏 ·客服 ·加入购物车在goods_detail下的index.wxml写页面代码 < ...
微信小程序：previewImage实现图片放大预览效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言前言记录一下做项目的过程中遇到的图片放大预览效果的实现实现的是点击图片可以放大预览,这个效果在京东淘宝都可以看到 ...

Vue 移动端 previewer实现图片放大预览

简述

可用工具

效果图

实现代码

结束语

Vue 移动端 previewer实现图片放大预览相关推荐

最新文章

热门文章