156 lines
3.4 KiB
Vue
156 lines
3.4 KiB
Vue
<template>
|
||
<main class="Magnify-main">
|
||
<div class="Magnify-container">
|
||
<!-- 图片展示 -->
|
||
<div class="__magnify__img">
|
||
<img :src="props.imgSrc" alt="">
|
||
<!--颜色块-->
|
||
<div class="__magnify__zoom"
|
||
:style="`height:${props.zoomRect.h}vh;
|
||
width:${props.zoomRect.w}vh;
|
||
display:{};
|
||
`"
|
||
></div>
|
||
</div>
|
||
|
||
<!--放大-->
|
||
<div class="__magnify__img-big-box"
|
||
:style="`height:${props.imgBigRect.h}vh;
|
||
width:${props.imgBigRect.w}vh;
|
||
left:${props.imgBigRect.l}vh;
|
||
top:${props.imgBigRect.t}vh;
|
||
`"
|
||
>
|
||
<img class="__magnify__img-big-img" :src="props.imgSrc" alt="">
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</template>
|
||
<script setup lang="ts">
|
||
|
||
/**
|
||
* @author:hyw
|
||
* @param:
|
||
* rate：放大比例
|
||
* imgBigSrc：大图src
|
||
* imgSrc：小图路径
|
||
* zoomRect:{
|
||
* h:颜色块高度
|
||
* w:颜色快宽度
|
||
* }
|
||
* imgBigRect:{
|
||
* h:大图高度
|
||
* w:大图宽度
|
||
* l:大图x位置
|
||
* t:大图y位置
|
||
* }
|
||
* zoomColor:颜色快颜色
|
||
* 以上位置均为vh
|
||
*/
|
||
const props = defineProps({
|
||
rate: {
|
||
type: Number,
|
||
default: 50
|
||
},
|
||
imgBigSrc: {
|
||
type: String,
|
||
default: '/img/zwt.png'
|
||
},
|
||
imgSrc: {
|
||
type: String,
|
||
default: '/img/zwt.png',
|
||
},
|
||
zoomRect: {
|
||
type: Object,
|
||
default: {
|
||
h: 10,
|
||
w: 10
|
||
}
|
||
},
|
||
imgBigRect: {
|
||
type: Object,
|
||
default: {
|
||
h: 50,
|
||
w: 50,
|
||
l: 80,
|
||
t: 0,
|
||
lc : 75,
|
||
speed:2
|
||
}
|
||
},
|
||
zoomColor: {
|
||
type: String,
|
||
default: 'yellow'
|
||
}
|
||
})
|
||
|
||
// 放大的比例
|
||
const RATE = props.rate;
|
||
|
||
onMounted(() => {
|
||
let oImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img")[0];
|
||
let oZoom = <HTMLDivElement>document.getElementsByClassName("__magnify__zoom")[0];
|
||
let oImgBig = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-box")[0];
|
||
let oImgBigImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-img")[0];
|
||
|
||
//init
|
||
(() => {
|
||
oZoom.style.backgroundColor = props.zoomColor
|
||
})()
|
||
|
||
oImg.onmouseover = function () {
|
||
oZoom.style.display = "block";
|
||
oImgBig.style.display = "block";
|
||
}
|
||
|
||
oImg.onmouseout = function () {
|
||
oZoom.style.display = "none";
|
||
oImgBig.style.display = "none";
|
||
}
|
||
let zoomX = 0,
|
||
zoomY = 0
|
||
oImg.onmousemove = function (e) {
|
||
|
||
zoomX = e.clientX - oImg.getBoundingClientRect().left
|
||
zoomY = e.clientY - oImg.getBoundingClientRect().top;
|
||
|
||
if (zoomX < 0) {
|
||
zoomX = 0
|
||
}
|
||
if (zoomX + oZoom.offsetWidth >
|
||
oImg.getBoundingClientRect().left +
|
||
oZoom.offsetWidth
|
||
) {
|
||
zoomX = oImg.getBoundingClientRect().left
|
||
}
|
||
if (zoomY < 0) {
|
||
zoomY = 0
|
||
}
|
||
if (e.clientY >
|
||
oImg.getBoundingClientRect().top +
|
||
oImg.getBoundingClientRect().height
|
||
-
|
||
oZoom.offsetWidth
|
||
) {
|
||
zoomY =
|
||
oImg.getBoundingClientRect().height
|
||
-
|
||
oZoom.offsetWidth
|
||
|
||
}
|
||
|
||
oZoom.style.left = zoomX + "px";
|
||
oZoom.style.top = zoomY + 'px';
|
||
|
||
oImgBigImg.style.left = (props.imgBigRect.lc || 75) + -zoomX * (props.imgBigRect.speed || 2)+ "px";
|
||
oImgBigImg.style.top = -zoomY * (props.imgBigRect.speed || 2)+ "px";
|
||
oImgBigImg.style.height = props.rate + "%";
|
||
oImgBigImg.style.width = props.rate + "%";
|
||
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped src="./index.scss"></style>
|
||
<style scoped src="./media.scss"></style>
|