【vue+js】实现图片在显示范围内滚动轴点击移动距离滑动

// An highlighted block
<el-dialog title="查看大图" class="file-big-img append-body" :visible.sync="lookBigImgDialog" top="5%" 
:append-to-body="true" center width="900px" :close-on-click-modal ="false">
  <div ref="imgBackBox" class="dialog-warp text-center" style="max-height: 500px;">
    <img :src="imgUrl" ref="imgBox" draggable="false" @mousemove="mouseDown($event)" alt="图片不见了" class="big-img" style="cursor: pointer;">
  </div>
</el-dialog>
export default {
  data() {
     return {
		oldW : 0,
		oldH : 0,
     }
  },
},
methods: {
	mouseDown(e){
		var div=this.$refs.imgBox
		var imgBackBox=this.$refs.imgBackBox
		let widthImg = this.$refs.imgBox.clientWidth
		let heightImg = this.$refs.imgBox.clientHeight
		let that = this
		if(widthImg > 890 || heightImg > 500){
			div.onmousedown=function(e){
				that.oldW = 0
				that.oldH = 0
				that.XWidth = e.clientX || e.clientX ||0;
				that.YHeight = e.clientY || e.clientY ||0;
				console.log(that.XWidth,that.YHeight);
	
				document.onmousemove=function(e){
					var xx=e.clientX || e.clientX ||0;
					var yy=e.clientY || e.clientY ||0;
				 	let WidhtScroll = widthImg > 890 ? widthImg - 890 : 0
				 	let HeightScroll = heightImg > 500 ? heightImg - 500 : 0
					let scrollLeft = imgBackBox.scrollLeft
					let scrollTop = imgBackBox.scrollTop
					if(WidhtScroll > 0){
						let W = that.XWidth - xx
						if(((imgBackBox.scrollLeft + W - that.oldW) > 0) && ((imgBackBox.scrollLeft + W - that.oldW) < widthImg - 890)){
							if(scrollLeft != 0){
								imgBackBox.scrollLeft = imgBackBox.scrollLeft + W - that.oldW
								that.oldW = W
							}else{
								imgBackBox.scrollLeft = W
								that.oldW = W
							}
						}else if((imgBackBox.scrollLeft + W - that.oldW) < 0){
							imgBackBox.scrollLeft = 0;
							that.oldW = W
						}else if((imgBackBox.scrollLeft + W - that.oldW) > widthImg - 890){
							imgBackBox.scrollLeft = widthImg - 890
							that.oldW = W
						}
					}
					if(HeightScroll > 0){
						let H = that.YHeight - yy
						if(((imgBackBox.scrollTop + H - that.oldH) > 0) && ((imgBackBox.scrollTop + H - that.oldH) < heightImg - 500)){
							if(scrollTop != 0){
								imgBackBox.scrollTop = imgBackBox.scrollTop + H - that.oldH
								console.log(imgBackBox.scrollTop);
								that.oldH = H
							}else{
								imgBackBox.scrollTop = H
								that.oldH = H
							}
						}else if((imgBackBox.scrollTop + H - that.oldH) < 0){
							imgBackBox.scrollTop = 0;
							that.oldH = H
						}else if((imgBackBox.scrollTop + H - that.oldH) > heightImg - 500){
							imgBackBox.scrollTop = heightImg - 500
							that.oldH = H
						}
					}
				};
				document.onmouseup=function(){
						document.onmouseup=null;
						document.onmousemove=null;
				};
	      };
		}
	},
}