Vue3图片放大镜效果 Vue3实现图片放大镜效果
WQ佩奇大哥 人气:0想了解Vue3实现图片放大镜效果的相关内容吗,WQ佩奇大哥在本文为您仔细讲解Vue3图片放大镜效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue3图片放大镜,vue图片放大镜,vue放大镜,下面大家一起来学习吧。
实现效果
代码
<template> <div class="goods-image"> <!-- 大图容器 --> <div class="large" :style="[ { backgroundImage: `url(${imageList[curId]})`, backgroundPositionX: position.backgroundPositionX, backgroundPositionY: position.backgroundPositionY, }, ]" v-if="isShow" ></div> <div class="middle" ref="target"> <img :src="imageList[curId]" alt="" /> <!-- 蒙层容器 --> <div class="layer" :style="{ left: left + 'px', top: top + 'px' }" v-if="isShow"></div> </div> <ul class="small"> <li v-for="(img, i) in imageList" :key="i" @mouseenter="curId = i" :class="{ active: curId === i }" > <img :src="img" alt="" /> </li> </ul> </div> </template> <script> import { reactive, ref, watch } from 'vue' import { useMouseInElement } from '@vueuse/core' export default { name: 'GoodsImage', props: { imageList: { type: Array, default: () => { return [] } } }, setup () { const curId = ref(0) const target = ref(null) // elementX: 鼠标距离左侧的偏移值 // elementY:表表距离顶部的偏移值 // isOutside: 是否在容器外部 外部true 内部 false const { elementX, elementY, isOutside } = useMouseInElement(target) const left = ref(0) // 滑块距离左侧的距离 const top = ref(0) // 滑块距离顶部的距离 const isShow = ref(false) // 显示大图和蒙层图的显示和隐藏 const position = reactive({ // 大图显示的位置,默认是0 backgroundPositionX: 0, backgroundPositionY: 0 }) watch( // 监听的对象 [elementX, elementY, isOutside], () => { if (elementX.value < 100) { // 左侧最小距离 left.value = 0 } if (elementX.value > 300) { left.value = 200 } if (elementX.value > 100 && elementX.value < 300) { left.value = elementX.value - 100 } if (elementY.value < 100) { // 左侧最小距离 top.value = 0 } if (elementY.value > 300) { top.value = 200 } if (elementY.value > 100 && elementY.value < 300) { top.value = elementY.value - 100 } // 控制背景图移动 // 1. 蒙层移动的方向和大图背景移动的方向是相反的 // 2. 蒙层和大图由于面积大小是1:2的 蒙层每移动一个像素 大图移动俩个像素 // backgrondPosition:x,y; position.backgroundPositionX = -left.value * 2 + 'px' position.backgroundPositionY = -top.value * 2 + 'px' // 当isOutside的值发生变化的时候,立刻取反赋值给isShow // isOutside: 是否在容器外部 外部true 内部 false isShow.value = !isOutside.value }, {} ) return { curId, target, left, top, position, isShow } } } </script>
加载全部内容