vue 实现图片放大缩小拖拽

/239173.html

/wjw1014/5411219

// 放大缩小public setTransform (multiples: number) {(this.$el as any).style.transform = `scale(${multiples})`;}// 拖拽public dropImage (e: any) {if (!e || this.editAble || !this.canDropImage) {return;}this.odiv = this.drawer.$el; // 获取目标元素// 算出鼠标相对元素的位置const disX = e.clientX - this.odiv.offsetLeft;const disY = e.clientY - this.odiv.offsetTop;document.onmousemove = (e) => {// 鼠标按下并移动的事件// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置const left = e.clientX - disX;const top = e.clientY - disY;// 移动当前元素this.odiv.style.left = left + 'px';this.odiv.style.top = top + 'px';};document.onmouseup = (e) => {document.onmousemove = null;document.onmouseup = null;this.$emit('onmouseup', this.odiv.style.left, this.odiv.style.top);};}

// 放大缩小private handleBigImage () {if (this.multiples >= 2) {return;}this.multiples += 0.25;}private handleSmallImage () {if (this.multiples <= 1) {return;}this.multiples -= 0.25;}

同时支持滚轮

@mousewheel.prevent="roller"private roller (e: any) {e.deltaY > 0 ? this.handleSmallImage() : this.handleBigImage();}