利用vue组件实现图片的拖拽和缩放功能利用vue组件实现图片的拖拽和

前言
如图所示：
方法如下：
总结

前言 vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下，一个好的组件必须有其必不可少的有优点：一是能提高应用开发效率、测试性、复用性等；二是组件应该是高内聚、低耦合的；三是组件应遵循单向数据流的原则。
在实现我的图片的拖拽组件我们的搞清其原理，在这里我使用的是mousedown,mousemove和mouseup来实现拖拽。

如图所示：

方法如下： 1.新建ElementDrag.vue文件内容如下：

2. 定义moveStart用于记录拖拽元素初始位置。定义isMousedown变量来判断鼠标是否按下，如果isMousedown === true鼠标移动就改变darg-inner位置。

3.样式部分我们设置外层drag-outer用flex布局让里面元素快速居中, user-drag: none; 禁用图片等元素的可拖拽属性。

.drag-outer {width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; .drag-inner {transform-origin: center center; display: flex; justify-content: center; align-items: center; cursor: move; user-select: none; >* {-webkit-user-drag: none; user-drag: none; }}}

4.添加鼠标滚轮事件缩放drag-inner元素, e.wheelDelta为正表示放大，为负缩小，值越大表示滚动越快。通过scale控制拖拽元素缩放。同过对组件传值scaleZoom来控制其缩放最大最小程度值。

...methods: {props: {type: Object,default(){ return {min: 0.5,max: 5}}},...handleScroll(e) {let speed = e.wheelDelta/120if(e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {this.scale+=0.04*speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`}else if(e.wheelDelta < 0 && this.scale > this.scaleZoom.min){this.scale+=0.04*speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`}}},mounted() {window.addEventListener('mousewheel',this.handleScroll,false) }

5.以上代码已经实现了功能我们预期的功能，但是为了更好的体验，需要进一步优化组件。添加isHover来控制鼠标是否移动到了drag-outer以外，如果isHover为false这时鼠标滚轮滚动不会缩放元素，并且将isMousedown设置为false。再使用插槽slot预览位置。

....data() {return {...,isHover: false,}},methods: {...handleScroll(e) {if(this.isHover) {let speed = e.wheelDelta/120if(e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {this.scale+=0.04*speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`}else if(e.wheelDelta < 0 && this.scale > this.scaleZoom.min){this.scale+=0.04*speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`}}}}

贴上组件的最终代码：

.drag-outer {width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; .drag-inner {transform-origin: center center; display: flex; justify-content: center; align-items: center; cursor: move; user-select: none; >* {-webkit-user-drag: none; user-drag: none; }}}

【利用vue组件实现图片的拖拽和缩放功能】在home.vue文件使用：点击体验