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

This article will explain in detail how to package the magnifying glass component of vue3 for everyone. Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

Component infrastructure

Complete code at the end can be copied directly

Objective: To encapsulate the picture preview component and realize the mouse hover effect.

Landing code:

import { ref } from 'vue'export default { name: 'GoodsImage', props: { images: { type: Array, default: () => [] } }, setup (props) { const currIndex = ref(0) return { currIndex } }}.goods-image { width: 480px; height: 400px; position: relative; display: flex; .middle { width: 400px; height: 400px; background: #f5f5f5; } .small { width: 80px; li { width: 68px; height: 68px; margin-left: 12px; margin-bottom: 15px; cursor: pointer; &:hover,&.active { border: 2px solid @xtxColor; } } }}

图片放大镜

目的：实现图片放大镜功能

步骤：

首先准备大图容器和遮罩容器

然后使用@vueuse/core的useMouseInElement方法获取基于元素的偏移量

计算出 遮罩容器定位与大容器背景定位 暴露出数据给模板使用

落地代码：

+ // 实现右侧大图布局效果（背景图放大4倍）+

+ //Prepare mask container to move +

import { ref } from 'vue'export default { name: 'GoodsImage', props: { images: { type: Array, default: () => [] } }, setup (props) { const currIndex = ref(0) return { currIndex } }}.goods-image { width: 480px; height: 400px; position: relative; display: flex;+ z-index: 500;+ // 右侧大图样式+ .large {+ position: absolute;+ top: 0;+ left: 412px;+ width: 400px;+ height: 400px;+ box-shadow: 0 0 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,.2);+ left: 0;+ top: 0;+ position: absolute;+ } } .small { width: 80px; li { width: 68px; height: 68px; margin-left: 12px; margin-bottom: 15px; cursor: pointer; &:hover,&.active { border: 2px solid @xtxColor; } } }}安装vueuse

npm i @vueuse/core@5.3.0

目前5.3.0版本相对稳定

vueuse提供的监听进入指定范围方法的基本使用

import { useMouseInElement } from '@vueuse/core'const { elementX, elementY, isOutside } = useMouseInElement(target)

方法的参数target表示被监听的DOM对象;返回值elementX, elementY表示被监听的DOM的左上角的位置信息left和top;isOutside表示是否在DOM的范围内，true表示在范围之外。false表示范围内。

功能实现

setup () {//monitored area const target = ref(null)//controls the display and hiding of mask layers and previews const isShow = ref(false)//defines mask coordinates const position = reactive({ left: 0, top: 0})//the coordinates of the preview image on the right const bgPosition = reactive({ backgroundPositionX: 0, backgroundPositionY: 0})return { position, bgPosition, target, isShow }}const { elementX, elementY, isOutside } = useMouseInElement(target) //watch([elementX, elementY, isOutside], () => { //Display and hide by flag bit control isShow.value = ! isOutside.value if (isOutside.value) return // X direction coordinate range control if (elementX.value

300) { //right position.left = 200 } else { //Middle position.left = elementX.value - 100 } //Y-direction coordinate range control if (elementY.value

300) { position.top = 200 } else { position.top = elementY.value - 100 } //calculate the distance to move the preview image bgPosition.backgroundPositionX = -position.left * 2 + 'px' bgPosition.backgroundPositionY = -position.top * 2 + 'px' //calculate the position of the mask layer position.left = position.left + 'px' position.top = position.top + 'px' }) Complete Code

import { ref, watch, reactive } from 'vue'import { useMouseInElement } from '@vueuse/core'export default { name: 'GoodsImage', props: { images: { type: Array, default: () => [] } }, setup (props) { const currIndex = ref(0) const target = ref(null) const isShow = ref(false) const position = reactive({ left: 0, top: 0 }) const bgPosition = reactive({ backgroundPositionX: 0, backgroundPositionY: 0 }) const { elementX, elementY, isOutside } = useMouseInElement(target) watch([elementX, elementY, isOutside], () => { isShow.value = !isOutside.value if (isOutside.value) return if (elementX.value = 300) { position.left = 200 } else { position.left = elementX.value - 100 } if (elementY.value = 300) { position.top = 200 } else { position.top = elementY.value - 100 } bgPosition.backgroundPositionX = -position.left * 2 + 'px' bgPosition.backgroundPositionY = -position.top * 2 + 'px' position.left += 'px' position.top += 'px' }) return { currIndex, target, isShow, position, bgPosition } }}.goods-image { width: 480px; height: 400px; position: relative; display: flex; z-index: 500; .large { position: absolute; top: 0; left: 412px; width: 400px; height: 400px; box-shadow: 0 0 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,.2); left: 0; top: 0; position: absolute; } } .small { width: 80px; li { width: 68px; height: 68px; margin-left: 12px; margin-bottom: 15px; cursor: pointer; &:hover, &.active { border: 2px solid @xtxColor; } } }}关于"vue3如何封装放大镜组件"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

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.