// 初始化可缩放 initResize(){ let el = this.$el; //获取当前元素 let spanNodes = this.$refs.resizeDivTag.childNodes; for(let i=0;i<spanNodes.length;i++){ this.resizeElementFun(spanNodes[i],el); // 分别为四个缩放方框设置监听事件 } }, resizeElementFun(element,el){ element.onmousedown = function(ev){ console.log('我是按下的元素') let oEv = ev || event; oEv.stopPropagation(); let oldWidth = el.offsetWidth; // 当前元素的宽度 let oldHeight = el.offsetHeight; // 当前元素的高度 console.log('-----'+ oldWidth+'----'+oldHeight); let oldX = oEv.clientX; // 当前鼠标对于浏览器可视区域的X坐标 let oldY = oEv.clientY; // 当前鼠标对于浏览器可视区域的Y坐标 let oldLeft = el.offsetLeft; // 当前元素对于父级定位元素的宽度 let oldTop = el.offsetTop; // 当前元素对于父级定位元素的高度 console.log('--zuo---'+ oldLeft+'--gao--'+oldTop); document.onmousemove = function(ev){ // oEv.stopPropagation(); let oEv = ev || event; let disY = (oldTop + (oEv.clientY - oldY)); // 当前缩放的元素距离定位父元素的高度 // let disX = (oldLeft + (oEv.clientX - oldLeft)); let disX = (oldLeft + (oEv.clientX - oldX)); // 当前缩放的元素距离定位父元素的宽度 if(disX>oldLeft+oldWidth){ disX=oldLeft+oldWidth } if(disY>oldTop+oldHeight){ disY=oldTop+oldHeight } if(element.className == 'tl'){ // 左上缩放时 el.style.width = oldWidth - (oEv.clientX - oldX) + 'px'; // 元素宽度= 缩放前宽度-鼠标当前坐标与原始坐标差值 el.style.height = oldHeight - (oEv.clientY - oldY) + 'px'; // 元素宽度= 缩放前高度-鼠标当前坐标与原始坐标差值 el.style.left = disX + 'px'; // 元素距离父元素的距离 = el.style.top = disY + 'px'; } else if (element.className == 'bl'){ // 左下 el.style.width = oldWidth - (oEv.clientX - oldX) + 'px'; el.style.height = oldHeight + (oEv.clientY - oldY) + 'px'; el.style.left = disX + 'px'; // el.style.bottom = oldTop + (oEv.clientY + oldY) + 'px'; } else if (element.className == 'tr'){ //右上 el.style.width = oldWidth + (oEv.clientX - oldX) + 'px'; el.style.height = oldHeight - (oEv.clientY - oldY) + 'px'; el.style.right = oldLeft - (oEv.clientX - oldX) + 'px'; el.style.top = disY + 'px'; } else if (element.className == 'br'){ //右下 el.style.width = oldWidth + (oEv.clientX - oldX) + 'px'; el.style.height = oldHeight + (oEv.clientY - oldY) + 'px'; el.style.right = oldLeft - (oEv.clientX - oldX) + 'px'; // el.style.bottom = oldTop + (oEv.clientY + oldY) + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; }; return false; } },
如果想看封装的组件，请查看github地址：github地址
缩放效果如下图：
Echarts缩放中存在的问题