Vue实现图片预览效果实例（放大、缩小、拖拽）
短信预约 -IT技能 免费直播动态提醒
前言
这张图是显示的图片放大的一个预览情况，这里是参考预览操作实现的一个背景为黑色的部分，上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大，代码是基于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 可关于预览
- 点击关闭后，恢复大小，避免点击其他照片影响大小
下面是全部实现代码：
<template>
<a-card style="width: 100%">
<div>
<img
:class="lazy" data-src="file"
alt=""
@click="handlePhotoShow(file)"
/>
<!-- preview="0"
preview-text="图片" -->
</div>
<div class="showImg" v-if="pictShow" @mousewheel="bbimg(this)">
<div class="setting_box">
<a-icon
class="setting_zoom"
v-if="zoomInShow == false"
type="zoom-in"
@click="handleZoomIn"
/>
<a-icon
color="#fff"
class="setting_zoom"
v-if="zoomInShow == true"
type="zoom-out"
@click="handleZoomOut"
/>
<a-icon color="#fff" class="setting_close" type="close" @click="handleClose" />
</div>
<img :class="lazy" data-src="file" alt="" :class="classStyle" :style="test" @mousedown="imgMove" />
</div>
</a-card>
</template>
<script>
export default {
data() {
return {
test: '',
pictShow: false,
zoomInShow: false,
params: {
zoomVal: 1,
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false,
},
file: '',
}
},
computed: {
classStyle() {
return this.zoomInShow ? 'a1' : 'a2'
},
},
methods: {
// 实现图片放大缩小
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
}
},
handleZoomIn() {
this.zoomInShow = true
},
handleZoomOut() {
this.zoomInShow = false
},
handlePhotoShow(file) {
console.log('file', file)
this.file = file
this.pictShow = true
},
handleClose() {
this.pictShow = false
this.test = `transform:scale(1)`
},
},
}
</script>
<style scoped lang="less">
.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: 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;
}
</style>因为具体也是查看了很多博客等资源最后完成的。
其实在代码内有一部分代码：
<img
:class="lazy" data-src="file"
preview="0"
preview-text="图片"
alt=""
@click="handlePhotoShow(file)"
/>其实有 preview="0" preview-text="图片" 这两行实现图片的预览，但是找了资料没找到具体实现的部分，但是这个属性确实实现了
这里手写预览的原因是这个插件在数量大的情况下是没有反应的。
总结
到此这篇关于Vue实现图片预览效果实例（放大、缩小、拖拽）的文章就介绍到这了,更多相关Vue图片放大缩小拖拽内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
