记录一下【代码实现–图片放大、缩小、旋转、拖拽】
需求:点击图片,查看实际图片,并且 可以放大、缩小、旋转、拖拽
实现:全局组件BigImg,接受图片路径参数,显示图片,拖拽使用自定义指令 v-dragImage实现(改变margin)
问题: /不限制图片大小,实现居中后,拖拽的距离和图片移动位置不同,然后看了一下element image大图预览拖拽的源码,发现有个初始 let tOffsetX=0, tOffsetY= 0;/
全局组件BigImg如下
<template>
<!-- 过渡动画 -->
<transition name="fade-enter-active">
<div class="img-view">
<!-- 遮罩层 -->
<div class="img-layer" @click.stop.prevent="bigImg"></div>
<div class="img-box">
<!-- 图片 -->
<img v-dragImage :style="imgStyle" :src="imgSrc" draggable="false" alt="没有图片资源"/>
</div>
<div class="btn-box">
<div @click.stop="tobig"><i class="el-icon-zoom-in"></i></div>
<div @click.stop="tosmall"><i class="el-icon-zoom-out"></i></div>
<div @click.stop="toleft"><i class="el-icon-refresh-left"></i></div>
<div @click.stop="toright"><i class="el-icon-refresh-right"></i></div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "BigImg",
props: ["imgSrc"], //接受图片地址
data() {
return {
imgScale:1,
imgRotate:0,
imgStyle:{
transform: 'scale(1) rotate(0deg)'
}
};
},
methods: {
bigImg() {
console.log('点击事件')
// 发送事件
this.$emit("clickit");
},
tobig(){
this.imgScale = (((this.imgScale * 10) + 2)/10).toFixed(1);
this.imgStyle = {
transform: 'scale('+this.imgScale+') rotate('+this.imgRotate+'deg)'
}
},
tosmall(){
this.imgScale = (((this.imgScale * 10) - 2)/10).toFixed(1);
this.imgStyle = {
transform: 'scale('+this.imgScale+') rotate('+this.imgRotate+'deg)'
}
},
toleft(){
this.imgRotate = this.imgRotate - 90;
this.imgStyle = {
transform: 'scale('+this.imgScale+') rotate('+this.imgRotate+'deg)'
}
},
toright(){
this.imgRotate = this.imgRotate + 90;
this.imgStyle = {
transform: 'scale('+this.imgScale+') rotate('+this.imgRotate+'deg)'
}
},
},
};
</script>
<style scoped>
/* bigimg */
.img-view {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
/*遮罩层样式*/
.img-view .img-layer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .7;
background: #000;
}
.img-view .img-box{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/*不限制图片大小,实现居中*/
.img-box img {
transform: scale(1) rotate(0deg);
margin-left: 0px;
margin-top: 0px;
max-height: 100%;
max-width: 100%;
overflow-clip-margin: content-box;
overflow: clip;
}
.img-view .btn-box{
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282PX;
height: 44PX;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: space-around;
opacity: .8;
cursor: pointer;
}
.img-view .btn-box i{
font-size: 30PX;
color: #ffffff;
}
</style>
** v-dragImage自定义指令如下**
const dragImage = {
// 指令的定义
bind: function (el) {
let tOffsetX=0,
tOffsetY= 0;
let dragBox = el; //获取当前元素
dragBox.onmousedown = (e) => {
console.log(e)
let oEvent = e || event;
oEvent.stopPropagation();
let offsetX = tOffsetX;
let offsetY = tOffsetY;
let startX = oEvent.pageX;
let startY = oEvent.pageY;
document.onmousemove = e => {
var oEvent = e || event;
var l = offsetX + oEvent.pageX - startX;
var t = offsetY + oEvent.pageY - startY;
tOffsetX = l;
tOffsetY = t;
dragBox.style.marginLeft = l+'px';
dragBox.style.marginTop = t+'px';
};
document.onmouseup = (e) => {
console.log('onmouseup')
document.onmousemove = null;
document.onmouseup = null;
dragBox.releaseCapture && dragBox.releaseCapture();
};
dragBox.setCapture && dragBox.setCapture();
return false;
};
}
};
export default (Vue) => {
Vue.directive('dragImage', dragImage);
}