现在项目中有这样的一个需求,对上传的图片可以点击之后在线预览,这篇文章主要给大家介绍了关于Vue实现图片预览效果实例（放大、缩小、拖拽）的相关资料,需要的朋友可以参考下
前言
这张图是显示的图片放大的一个预览情况，这里是参考预览操作实现的一个背景为黑色的部分，上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大，代码是基于Ant Design Vue框架的基础上
这里先分解部分，后面有全部代码
1.需要有黑色背景用于预览背景：
这里的背景要占满整个屏幕（这里的一般是参考其他插件预览的样式进行模拟设计的），样式在后方代码内
2.展示图片并且把图片展示到背景板最中间。
3.最重要的下方的两部分：
滚轮放大缩小图片：
bbimg() { let e = e || window.event this.params.zoomVal += e.wheelDelta / 1200 if (this.params.zoomVal >= 0.2) { this.test = `transform:scale(${this.params.zoomVal});` } else { this.params.zoomVal = 0.2 this.test = `transform:scale(${this.params.zoomVal});` return false } },
图片拖拽：
imgMove(e) { console.log('e', e) let oImg = e.target let disX = e.clientX - oImg.offsetLeft let disY = e.clientY - oImg.offsetTop console.log('disX', disX) document.onmousemove = (e) => { e.preventDefault() let left = e.clientX - disX let top = e.clientY - disY this.test = this.test + `left: ${left}px;top: ${top}px;` } document.onmouseup = (e) => { document.onmousemove = null document.onmouseup = null } },
这里的test和classStyle是作为图片的动态样式，虽然名字起得着急，但是不影响使用
整体实现的功能：
- 点击图片，可以进行滚轮放大及缩小，
- 点击后按压左键可进行拖拽查看图片
- 点击上方的放大及缩小图标也可以进行放大等操作，
- 点击 x 可关于预览
- 点击关闭后，恢复大小，避免点击其他照片影响大小
下面是全部实现代码：
<div> <!-- preview="0" preview-text="图片" --></div><div class="showImg"> <div class="setting_box"> </div></div> .showImg { width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 1); position: fixed; *position: absolute; z-index: 20; margin: 0 auto; top: 0; left: 0; display: flex; justify-content: <i>本文来源gaodai$ma#com搞$$代**码网</i>center; align-items: center; .setting_box { width: 100%; height: 50px; line-height: 50px; font-size: 20px; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; z-index: 999; .setting_zoom, .setting_close { position: absolute; z-index: 1000; top: 20px; color: #fff; opacity: 1; } .setting_zoom { right: 50px; } .setting_close { right: 10px; } } } .a1 { max-width: 200vw; max-height: 180vh; position: absolute; z-index: 22; margin-top: 40px; cursor: move; } .a2 { max-width: 95vw; max-height: 90vh; position: absolute; z-index: 22; margin-top: 40px; cursor: move; } .zoom-box { cursor: zoom-in; } .photo_box { margin: 0 5px 5px 0; }
因为具体也是查看了很多博客等资源最后完成的。
其实在代码内有一部分代码：
其实有 preview=”0″ preview-text=”图片” 这两行实现图片的预览，但是找了资料没找到具体实现的部分，但是这个属性确实实现了
这里手写预览的原因是这个插件在数量大的情况下是没有反应的。
总结
到此这篇关于Vue实现图片预览效果实例（放大、缩小、拖拽）的文章就介绍到这了,更多相关Vue图片放大缩小拖拽内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是Vue实现图片预览效果实例（放大、缩小、拖拽）的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue实现图片预览效果实例（放大、缩小、拖拽）
转载请注明原文链接：Vue实现图片预览效果实例（放大、缩小、拖拽）
