How to realize the effect of magnifying glass with Vue3.0

This article mainly explains "how to achieve magnifying glass effect in Vue3.0". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve the magnifying glass effect with Vue3.0".

Need to achieve the effect is: fixed magnification of two times, the mouse into the left picture area, the mask layer display, leave, the mask layer hidden.

Cursor in css

How to realize the mouse following effect: absolute positioning + modifying top,left to control movement

In @ vueuse, there is a tool method: useMouseInElement

Hello world import {ref} from "vue" import {useMouseInElement} from "@ vueuse/core" export default {setup () {const target = ref (null) const {x, y, isOutside} = useMouseInElement (target) return {x, y, isOutside}

This is the usage on the official website of VueUse. Finally, don't forget that return {target} I didn't have a value of return target,x,y,isOutside at first, which is 0j0pl false, not a changed value.

Relationship between the position of the mouse and the position of the mask:

/ / this is the mask layer setup () {/ / below is the code const layerStyle = reactive ({top: "0px", left: "0px"}) / / listens for changes in three values. The first parameter of watch uses the array watch ([elementX, elementY, isOutside]). () = > {/ / layerStyle.left = elementX.value / 2 + "px" / / layerStyle.top = elementY.value / 2 + "px" let top = elementY.value-100let left = elementX.value-100 / / assign the position if to the mask element (top

< 0) top = 0 if (top >

200) top = 200 if (left

< 0) left = 0 if (left >

Left = 200layerStyle.top = top + "px" layerStyle.left = left + "px"}) return {elementX, elementY, isOutside, target, layerStyle}}

The mask area cannot exceed the parent box on the left. There are two lines of code that I commented out, so why can't I write them together? because later, when I need to add judgment, I will find that when I add px after judgment, you will find that there is no way to start. If you write separately above, top,left is just a numerical value, and then add units after the calculation is completed.

How to achieve the magnification effect:

There is a background-size attribute in the css style. The first parameter refers to the width and the second parameter refers to the height. You can enlarge the picture.

Itself is 400 * 400, then twice magnification is 800mm 800.

Background-position-x in css style. Background-position-y can enlarge the specified area.

About background-position: XQuery, the first value is horizontal, and the second is vertical.

This is the div with magnification on the right:

This is the css code, you can refer to:

.large {position: absolute; top: 0; left: 412px; width: 400px; height: 400px; box-shadow: 00 10px rgba; background-repeat: no-repeat; background-size: 800px 800px; background-color: # f8f8f8;}

Finally: when the mouse moves out of the left box area, the mask is hidden, and the enlarged box on the right is also hidden.

The isOutSide attribute of useMouseInElement can be used to detect whether the monitoring element is exceeded or not, and vmurshow = "! isOutSide" is enough.

At this point, I believe you have a deeper understanding of "Vue3.0 how to achieve magnifying glass effect", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!