图片放大镜
<template><div class="goods-image"><!-- 大图片 --><div class="large" v-show="show" :style="[{backgroundImage:`url(${images[currIndex]})`}, bgPosition]"></div><!-- 中图片 --><div class="middle" ref="target"><img :src="images[currIndex]" alt=""><!-- 遮罩层 --><div class="layer" v-show="show" :style="position"></div></div><!-- 小图片 --><ul class="small"><li v-for="(item, i) in images" :key="i" :class="{ active: i===currIndex}"><img :src="item" alt="" @mouseenter="currIndex=i" /></li></ul></div></template><script>import {reactive, ref, watch } from 'vue-demi'import {useMouseInElement } from '@vueuse/core'export default {props: {images: {type: Array,default: () => []}},setup () {const currIndex = ref(0)const {position, bgPosition, show, target } = usePreviewImg()return {currIndex, position, bgPosition, show, target }}}// 定义图片跟随放大镜函数const usePreviewImg = () => {const target = ref(null)// 定义放大图片显示与隐藏const show = ref(false)// 定义设置遮罩层的位置const position = reactive({left: 0,top: 0})// 定义背景图的位置const bgPosition = reactive({backgroundPositionX: 0,backgroundPositionY: 0})// elementX 鼠标基于容器左上角X轴偏移// elementY 鼠标基于容器左上角Y轴偏移// isOutside 鼠标是否在模板容器外// 使用@vueuse/core插件const {elementX, elementY, isOutside } = useMouseInElement(target)// 监听鼠标坐标，及鼠标是否在目标容器内watch([elementX, elementY, isOutside], () => {// 控制x坐标在0-200内if (elementX.value < 100) position.left = 0else if (elementX.value > 300) position.left = 200else position.left = elementX.value - 100// 控制Y坐标在0-200内if (elementY.value < 100) position.top = 0else if (elementY.value > 300) position.top = 200else position.top = elementY.value - 100// 设置大图位置bgPosition.backgroundPositionX = -position.left * 2 + 'px'bgPosition.backgroundPositionY = -position.left * 2 + 'px'// 设置遮罩层定位position.left = position.left + 'px'position.top = position.top + 'px'// 设置是否显示放大图和遮罩层show.value = !isOutside.value})return {target, show, position, bgPosition }}</script><style lang="less" scoped>.goods-image{width: 480px;height: 400px;position: relative;display: flex;z-index: 555;.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-color: #f8f8f8;background-size: 800px 800px;}.middle{width: 400px;height: 400px;background: #f5f5f5;cursor: move;position: relative;.layer{position: absolute;width: 200px;height: 200px;background: rgba(0,0,0,.2);left: 0;top: 0;}}.small{width: 80px;li{width: 68px;height: 68px;margin-left: 12px;margin-bottom: 15px;cursor: pointer;&hover,&.active{border: 2px solid @xtxColor;}}}}</style>
效果：
