Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use vue components to achieve picture drag and zoom functions, the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Preface

Vue to achieve a component is actually very simple, but to write a good reusable component that requires more learning and research, a good component must have its essential advantages: first, it can improve application development efficiency, testability, reusability, etc.; second, the component should be high cohesion, low coupling; third, the component should follow the principle of one-way data flow.

In implementing the drag-and-drop component of my image, we figure out how it works, and here I use mousedown,mousemove and mouseup to implement drag-and-drop.

As shown in the figure:

The methods are as follows:

1. The new ElementDrag.vue file is as follows:

two。 Defines that the moveStart is used to record the initial position of the drag element. Define the isMousedown variable to determine whether the mouse is pressed or not, and change the darg-inner position if the isMousedown = true mouse moves.

Export default {name: 'ElementDrag', data () {return {isMousedown: false, / / whether the mouse presses moveStart: {x: 0, y: 0}, / / the initial position of the dragged element translate: {x: 0, y: 0}, / / calculates how many scale: 1 the dragged element has moved in the lower x direction. / / drag element scaling value}}, methods: {dragMousedown () {this.moveStart.x = event.clientX this.moveStart.y = event.clientY this.isMousedown = true} DragMousemove () {if (this.isMousedown) {this.translate.x + = (event.clientX-this.moveStart.x) / this.scale this.translate.y + = (event.clientY-this.moveStart.y) / this.scale this.$refs.dragElement.style.transform = `scale (${this.scale}) translate (${this.translate.x} px) ${this.translate.y} px) `this.moveStart.x = event.clientX this.moveStart.y = event.clientY}

3. In the style part, we set the outer drag-outer to use the flex layout to center the inner elements quickly, and user-drag: none; disables the draggable attributes of elements such as images.

.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. Add the mouse wheel event zoom drag-inner element. E.wheelDelta is positive to enlarge, negative to zoom out, and a higher value means faster scrolling. Use scale to control the zoom of dragged elements. Pass the value scaleZoom to the component to control its maximum and minimum zoom value.

Methods: {props: {type: Object, default () {return {min: 0.5, max: 5}, HandleScroll (e) {let speed = e.wheelDelta/120 if (e.wheelDelta > 0 & & this.scale)

< this.scaleZoom.max) { this.scale+=0.04*speed this.$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*speed this.$refs.dragElement.style.transform = `scale (${this.scale}) translate (${this.translate.x} px, ${this.translate.y} px) `}, mounted () {window.addEventListener ('mousewheel',this.handleScroll,false)}

5. The above code has achieved the functionality we expected, but for a better experience, the component needs to be further optimized. Add an isHover to control whether the mouse moves outside the drag-outer. If the isHover is false, the mouse wheel scroll does not scale the element, and the isMousedown is set to false. Then use the slot slot to preview the location.

.. data () {return {..., isHover: false,}}, methods: {... HandleScroll (e) {if (this.isHover) {let speed = e.wheelDelta/120 if (e.wheelDelta > 0 & & this.scale)

< this.scaleZoom.max) { this.scale+=0.04*speed this.$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*speed this.$refs.dragElement.style.transform = `scale (${this.scale}) translate (${this.translate.x} px, ${this.translate.y} px) `}

Paste the final code of the component:

Export default {name: 'ElementDrag', props: {outerOptions: {type: Object, default () {return {background:' rgba'}, innerOptions: {type: Object Default () {return {background: 'rgba',}, scaleZoom: {type: Object, default () {return {max: 5 Min: 0.2}}, data () {return {isMousedown: false, isHover: false, moveStart: {}, translate: {x: 0, y: 0}, scale: 1}} Methods: {handleScroll (e) {if (this.isHover) {let speed = e.wheelDelta/120 if (e.wheelDelta > 0 & & this.scale)

< this.scaleZoom.max) { this.scale+=0.04*speed this.$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*speed this.$refs.dragElement.style.transform = `scale (${this.scale}) translate (${this.translate.x} px, ${this.translate.y} px) `} DragMousedown () {this.moveStart.x = event.clientX this.moveStart.y = event.clientY this.isMousedown = true} DragMousemove () {if (this.isMousedown) {this.translate.x + = (event.clientX-this.moveStart.x) / this.scale this.translate.y + = (event.clientY-this.moveStart.y) / this.scale this.$refs.dragElement.style.transform = `scale (${this.scale}) translate (${this.translate.x} px) ${this.translate.y} px) `this.moveStart.x = event.clientX this.moveStart.y = event.clientY}}, mounted () {window.addEventListener ('mousewheel',this.handleScroll,false)}}. 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;}

Use in home.vue files: click to experience

Import ElementDrag from'@ / components/ElementDrag'export default {name: 'Home', components: {ElementDrag}}. Home {width: 100vw; height: 100vh } Why to use VueVue is a friendly, multi-purpose and high-performance JavaScript framework, using vue can create a more maintainable and testable code base, Vue allows you to split a web page into reusable components, each component contains its own HTML, CSS, JavaScript, to render the corresponding place in the web page, so more and more front-end developers use vue.

On how to use vue components to achieve picture drag and zoom functions to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.