话不多说直接上代码，注释很详细，有不懂的可以直接问我
<template> <!--分窗满窗--照片查看组件--> <div :id="currentId" @mousewheel.stop="wheelToScalingTheImage" class="image-viewer-in-segmentation-model segmentation-image-viewer"> <img @load="getImageNaturalSize()" @mousedown.stop="dragTheImage" @mousemove.stop="imageMoveStarts" @mouseup.stop="imageMoveEnds" class="image-con" :id="currentImgId" :src="imageSourceUrl" alt="照片查看"> </div> </template> <script> export default { data() { return { natural_ 0,//图片资源的原始宽度 natural_height: 0,//图片资源的原始高度 client_ 0,//初始时图片的预设宽度 client_height: 0,//初始时图片的预设高度 min_0,//最小可缩放至 maxScale:0,//最大缩放程度 offset_x:0,//拖动时鼠标指针x方向的偏移量 offset_y:0,//拖动时鼠标指针y方向的偏移量 is_movable: false,//当前是否可拖动 } }, props:['imageSourceUrl','currentLoad'], methods: { //获取图片原始宽高 getImageNaturalSize(){ debugger let image_con = document.getElementById(this.currentImgId); // let image_con = document.querySelector('.image-con'); this.natural_width = image_con.naturalWidth; this.natural_height = image_con.naturalHeight; this.client_width = image_con.clientWidth; this.client_height = image_con.clientHeight; let CLIENT_WIDTH, CLIENT_HEIGHT ; if(this.natural_width > this.natural_height){ image_con.style.height = 'auto'; image_con.style.width = '100%'; } CLIENT_WIDTH = image_con.clientWidth / 16 + 'rem' CLIENT_HEIGHT = image_con.clientHeight / 16 + 'rem' image_con.style.left = `calc((100% - ${CLIENT_WIDTH}) / 2)`; image_con.style.top = `calc((100% - ${CLIENT_HEIGHT}) / 2)`; this.maxScale = this.natural_height / this.client_height; this.min_width = this.natural_width / this.maxScale; let minScale = 0.5; console.log("照片的原始尺寸是:",this.natural_width+ 'x'+ this.natural_height); }, //滚动鼠标滚轮对图片进行缩放 wheelToScalingTheImage(event){ let _this = this; let direction = _this.handleScrollDirection(event); let image_con = document.getElementById(this.currentImgId); // let image_con = document.querySelector('.image-con'); let out_count = 0,in_count = 0; if(direction === 'up'){ if(out_count < this.maxScale - 1){ out_count ++; in_count = out_count image_con.style.height = this.natural_height * ((out_count + 1) / this.maxScale) / 16 +'rem'; image_con.style.width = this.natural_width * ((out_count + 1) / this.maxScale) / 16 +'rem'; } else if(out_count >= this.maxScale - 1){ out_count = this.maxScale; in_count = out_count; image_con.style.height = this.natural_height / 16 + 'rem'; image_con.style.width = this.natural_width / 16 + 'rem'; } } else if(direction === 'down'){ if(in_count > 1){ in_count--; out_count = in_count; image_con.style.height = this.natural_height * ((in_count + 1) / this.maxScale) / 16 +'rem'; image_con.style.width = this.natural_width * ((in_count + 1) / this.maxScale) / 16 +'rem'; } else if(in_count <= 1){ in_count = 1; out_count = in_count; image_con.style.height = this.client_height / 16 +'rem'; image_con.style.width = 'auto'; } } }, //判断滚轮的滚动方向，以判断是放大或是缩小行为 handleScrollDirection(e) { let direction = e.deltaY > 0 ? 'down' : 'up'; return direction; }, //拖拽图片到指定位置 dragTheImage(event){ if(event.button == 0){ this.is_movable = true; //获取被拖动的元素 let image_con = document.getElementById(this.currentImgId); //为了兼容IE8 下面这行代码表示你有这个就执行 //浏览器有一个默认行为 就是你选种的元素有一个拖拽的效果 拉到导航栏中可以搜索的那个捕获ta(保证可获取连续拖动的事件对象) image_con.setCaptue && image_con.setCaptue(); //也是为了兼容IE8 window.event(IE8) 它的事件对象属性在window中 event = event || window.event; //获取偏移量 保持鼠标的指针 不动 offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent节点的左边界偏移的像素值。 //偏移量 offset this.offset_x = event.clientX - image_con.offsetLeft; this.offset_y = event.clientY - image_con.offsetTop; } }, //当图片开始跟随鼠标指针移动时 imageMoveStarts(event){ console.log(event.action,"打印的拖动的action") if(this.is_movable){ let image_con = document.getElementById(this.currentImgId); event = event ||window.event; //当鼠标移动时 被拖拽元素跟移动 //获取鼠标的二维坐标(无偏移的) this.unbiased_left = event.clientX - this.offset_x; this.unbiased_top = event.clientY - this.offset_y; //修改图片的位置 image_con.style.left = this.unbiased_left / 16 + 'rem'; image_con.style.top = this.unbiased_top / 16 + 'rem'; } }, //当松开鼠标，图片移动终止 imageMoveEnds(event){ debugger this.is_movable = false; }, //干掉h5原生事件,防止在拖动时mouse-up不能触发 cancelNativeH5Event(){ document.ondragstart = function(ev) { ev.preventDefault(); }; document.ondragend = function(ev) { ev.preventDefault(); } }, }, components: {}, watch: {}, computed: { currentId(){ return 'segmentationImageViewer'+ this.currentLoad }, currentImgId(){ return 'imageConId' + this.currentLoad }, }, mounted() { this.cancelNativeH5Event(); }, created() { }, beforeDestroy() { }, } </script> <style lang="less" scoped> .segmentation-image-viewer{ width: 100%; height:100%; position: absolute; left: 0rem; top:0rem; z-index: 999; /*display: flex; align-items: center; justify-content: center;*/ overflow: hidden; .image-con{ width: auto; height: 100%; object-fit:cover; position: absolute; left: 0; top: 0; } } </style>