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

How to use vue3 to achieve magnifying glass effect, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

When visiting shopping websites, we must have seen the mouse on the goods, there will be a magnifying effect. Today, let's encapsulate a global component of the magnifying glass effect by ourselves. Let's take a look.

I. the significance of encapsulation

From a technical point of view

Encapsulated as a global component through the vue plug-in, the whole project can also be used in other locations and is easy to use

Modular development idea, one module to achieve one function

User point of view

It can bring a better browsing experience.

You can see the details of the goods.

Second, how to encapsulate?

1. Prepare for

You need to use the useMouseInElement method of @ vueuse/core, so first open the terminal under the root of the project and execute the following command

The specified version installed here, friends, choose according to your needs.

Npm install @ vueuse/core@5.3.02. Start encapsulation

As in the previous article, register the global component using the vue plug-in

Store the encapsulated global components under src/components, and create a new enlarge-images.vue file in this directory.

The code is as follows (example):

Import {ref, watch, reactive} from 'vue'import {useMouseInElement} from' @ vueuse/core'export default {name: 'EnlargeImages', props: {images: {type: Array, default: () = > []}, setup (props) {const currIndex = ref (0) const target = ref (null) const isShow = ref (false) / / coordinates of the mask layer const position = reactive ({left: 0) Top: 0}) / / controls the position of the background map const bgPosition = reactive ({backgroundPositionX: 0, backgroundPositionY: 0}) const {elementX, elementY, isOutside} = useMouseInElement (target) / / listen for information watch ([elementX, elementY, isOutside], () = > {/ / each time the value changes Read the new data and isShow.value =! isOutside.value / / the mouse is outside the area of the picture, and there is no need to calculate the coordinates if (isOutside.value) return / / horizontal if (elementX.value)

{/ / right boundary position.left = 200} else {/ / status in the middle position.left = elementX.value-100} / / Vertical if (elementY.value

{/ / Lower boundary position.top = 200} else {/ / status in the middle position.top = elementY.value-100} / / console.log (elementX.value, elementY.value IsOutside.value) / / calculate the location of the background of the preview large image bgPosition.backgroundPositionX =-position.left * 2 + 'px' bgPosition.backgroundPositionY =-position.top * 2 +' px' / / calculate the position of the mask layer on the left position.left + = 'px' position.top + =' px'}) return {currIndex, target, isShow, position, bgPosition}}. Goods-image {box-sizing: border-box Width: 480px; height: 400px; position: relative; display: flex; z-index: 500; img {width: 100%; height: 100%;} .large {position: absolute; top: 0; left: 410px; width: 400px; height: 400px; box-shadow: 00 10px rgba (0,0,0,0.1); background-repeat: no-repeat; background-size: 800px 800px Background-color: # f8f8f8;} .middle {width: 400px; height: 400px; background: # f5f5f5; position: relative; cursor: move; .layer {width: 200px; height: 200px; background: rgba (0,0,0,0.2); left: 0; top: 0; position: absolute;} .small {margin: 0; padding: 0 Width: 80px; li {width: 68px; height: 68px; margin: 10px; list-style: none; cursor: pointer; &: hover, & .active {border: 2px solid # 27ba9b;}

Create a new index.js under src/components

Import EnlargeImages from'. / enlarge-images.vue'export default {install (app) {app.component (EnlargeImages.name, EnlargeImages)}}

Register as a plug-in in main.js

Import {createApp} from 'vue'import App from'. / App.vue'import router from'. / router'import store from'. / store'// 's own package import myUI from'. / components'createApp (App) .use (store) .use (router) .use (myUI) .mount ('# app') 3. Use

Here with the help of fixed data for testing

The code is as follows (example):

Export default {name: 'App', setup () {const images = [' https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fcloud.jpeg', 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fground.jpeg',' https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fnight.jpeg', 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fstreet.jpeg',' https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fsun.jpeg'] return {images}}. Home-banner {width: 1000px Margin: 50px auto;} III. Effect demonstration

Move the mouse over the small picture on the right to switch the currently displayed picture.

Put the mouse into the left picture preview area, and move the mouse in the preview area to see the enlarged designated area on the right.

(the PS:gif picture is too big, please take a look at the effect picture ~)

For batch registration as a global component, you can take a look at this article on vue common tool functions.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.