<template>
<div class="spec-preview">
<img :src="imgMagnify" />
<div class="event" @mousemove="handler"></div>
<div class="big">
<img :src="imgMagnify" ref="big" />
</div>
<!-- 遮罩层 -->
<div class="mask" ref="mask"></div>
</div>
</template>
<script>
export default {
name: "Zoom",
props:{
imgMagnify: {
type: String,
default:
"https://img.alicdn.com/imgextra/i3/2857774462/TB21fgcwwNlpuFjy0FfXXX3CpXa_!!2857774462.jpg_430x430q90.jpg",
},
},
data() {
return {
currentIndex: 0,
};
},
computed: {
ImageList() {
return this.skuImageList[this.currentIndex] || {};
},
},
mounted() {
//全局事件总线获取兄弟组件传递过来的索引值
this.$bus.$on("getIndex", (index) => {
this.currentIndex = index;
});
},
methods: {
//这里是放大方法的主要处理逻辑
handler(event) {
let mask = this.$refs.mask;
let big = this.$refs.big;
let left = event.offsetX - mask.offsetWidth / 2;
let top = event.offsetY - mask.offsetHeight / 2;
//约束范围
if (left <= 0) left = 0;
if (left >= mask.offsetWidth) left = mask.offsetWidth;
if (top <= 0) top = 0;
if (top >= mask.offsetHeight) top = mask.offsetHeight;
mask.style.left = left + "px";
mask.style.top = top + "px";
big.style.left = -2 * left + "px";
big.style.top = -2 * top + "px";
console.log(left);
},
},
};
</script>
<style lang="scss">
.spec-preview {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #ccc;
img {
width: 100%;
height: 100%;
}
.event {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 998;
}
.mask {
width: 50%;
height: 50%;
background-color: rgba(171, 250, 171, 0.3);
position: absolute;
left: 0;
top: 0;
display: none;
}
.big {
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: 100%;
border: 1px solid #aaa;
overflow: hidden;
z-index: 998;
display: none;
background: white;
img {
width: 200%;
max-width: 200%;
height: 200%;
position: absolute;
left: 0;
top: 0;
}
}
.event:hover ~ .mask,
.event:hover ~ .big {
display: block;
}
}
</style>
扫一扫
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
