1、HTML
<template><div v-loading="Loading" class="goodsUpload"><!-- 商品图片 --><div class="mainImage"><!-- 图片 --><el-image class="imageItem" title="点击大图预览" :src="imageUrl" fit="contain" /><!-- 鼠标层罩 --><div v-show="coverLayerShow" class="coverLayerMouse" :style="coverLayerStyle"></div><!-- 最顶层覆盖了整个原图空间的透明层罩 --><div class="coverLayerMaskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler"></div><!-- 放大的图片 --><div v-show="coverLayerShow" class="coverLayerRight"><el-image :style="coverLayerImg" class="coverLayerRightImg" :src="imageUrl" fit="contain" /></div></div><!-- 商品图片 --></div></template>
2、JS
<script>export default {name: 'GoodsUpload',data() {return {// 商品图片imageUrl: '/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',Loading: false,coverLayerStyle: {transform: ""},coverLayerImg: {},coverLayerShow: false,}},created() {},methods: {// 鼠标进入原图空间函数enterHandler() {// 层罩及放大空间的显示this.coverLayerShow = true;},// 鼠标移动函数moveHandler(event) {// 鼠标的坐标位置let x = event.offsetX;let y = event.offsetY;// 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角let topX = x - 100 < 0 ? 0 : x - 100;let topY = y - 100 < 0 ? 0 : y - 100;// 对层罩位置再一次限制，保证层罩只能在原图区域空间内if (topX > 200) {topX = 200;}if (topY > 200) {topY = 200;}// 通过 transform 进行移动控制this.coverLayerStyle.transform = `translate(${topX}px,${topY}px)`;this.coverLayerImg.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;},// 鼠标移出函数outHandler() {// 控制层罩与放大空间的隐藏this.coverLayerShow = false;},}}</script>
3、CSS
<style scoped>.mainImage {width: 400px;height: 400px;position: relative;}.mainImage .imageItem {border: 1px solid #DCDCDC;width: 400px;height: 400px;position: relative;}/* 放大的图片，通过定位将左上角定位到(0,0) */.coverLayerRightImg {display: inline-block;width: 800px;height: 800px;position: absolute;top: 0;left: 0;}/* 右边的区域图片放大空间 */.coverLayerRight {background-color: #FFFFFF;width: 400px;height: 400px;border: 1px solid #DCDCDC;position: relative;overflow: hidden;position: absolute;left: 412px;top: 0;z-index: 1001;}/* 一个最高层层罩 */.coverLayerMaskTop {width: 400px;height: 400px;position: absolute;z-index: 1;top: 0;left: 0;cursor: move;}/* 层罩，通过定位将左上角定位到(0,0) */.coverLayerMouse {width: 200px;height: 200px;background: rgba(0, 0, 0, 0.3);opacity: 0.4;position: absolute;top: 0;left: 0;}</style>
