aida_front/src/component/Detail/magnifyingGlass.vue

<template>
    <div class="magnifyingGlass">
		<div class="initial">
			<div class="initial_mask" v-mousemove>
				<img class="initial_img" :src="imageUrl" alt="">
				<div class="initial_haver"></div>
			</div>
		</div>
		<div class="big"></div>
    </div>
</template>
<script>
import { getUploadUrl,isMoible } from "@/tool/util";
import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
export default defineComponent({
    components: {
        DownOutlined,
        UserOutlined,
    },
	props: ['designItemDetailUrl'],
	setup(props){
		let imageUrl = ref()
		let showGlass = ref(false)
	return{
		imageUrl,
		showGlass
		}
    },
	watch:{
	},
    data() {
        return {
        };
    },
   mounted() {
	},
	directives:{
		mousemove:{
			
			mounted (el,binding) {
				if(isMoible()){
					let touchstart = (event)=>{//移入
						const mask = document.getElementsByClassName('magnifyingGlass')[0].querySelector('.initial_haver')
						const initialImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".initial_img");
						const bigImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".big");
						const maskW = mask.getBoundingClientRect().width;
						const bigImgW = bigImg.getBoundingClientRect().width;
						const num = bigImgW / maskW
						bigImg.style.backgroundImage = `url(${initialImg.src})`;
						const { left, top} = initialImg.getBoundingClientRect();
						const initialImgH = initialImg.getBoundingClientRect().height
						const initialImgW = initialImg.getBoundingClientRect().width;
						const {width,height} = mask.getBoundingClientRect();
						let touchmove = (event)=>{//移动
							const x = event.targetTouches[0].pageX - left;
							const y = event.targetTouches[0].pageY - top;
							const bgPosX = (-x+width/2 )* num;
							const bgPosY = (-y+height/2) * num;
							const bgPosW = initialImgW * num;
							const bgPosH = initialImgH * num;
							mask.style.top = y-height/2+'px';
							mask.style.left = x-width/2+'px';
							bigImg.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
							bigImg.style.backgroundSize = `${bgPosW}px ${bgPosH}px`;
						}
						document.addEventListener('touchmove',touchmove,{passive:true})
						el.addEventListener('touchend',()=>{
							document.removeEventListener('touchmove',touchmove)
							document.removeEventListener('touchstart',touchstart)
						})
					}
					el.addEventListener('touchstart',touchstart)
				}else{
					let mouseover = (event)=>{//移入
						const mask = document.getElementsByClassName('magnifyingGlass')[0].querySelector('.initial_haver')
						const initialImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".initial_img");
						const bigImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".big");
						const maskW = mask.getBoundingClientRect().width;
						const bigImgW = bigImg.getBoundingClientRect().width;
						const num = bigImgW / maskW
						bigImg.style.backgroundImage = `url(${initialImg.src})`;
						const { left, top} = initialImg.getBoundingClientRect();
						const initialImgH = initialImg.getBoundingClientRect().height
						const initialImgW = initialImg.getBoundingClientRect().width;
						const {width,height} = mask.getBoundingClientRect();
						let mousemove = (event)=>{//移动
							const x = event.clientX - left;
							const y = event.clientY - top;
							const bgPosX = (-x+width/2 )* num;
							const bgPosY = (-y+height/2) * num;
							const bgPosW = initialImgW * num;
							const bgPosH = initialImgH * num;
							mask.style.top = y-height/2+'px';
							mask.style.left = x-width/2+'px';
							bigImg.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
							bigImg.style.backgroundSize = `${bgPosW}px ${bgPosH}px`;
						}
						document.addEventListener('mousemove',mousemove)
						el.addEventListener('mouseout',()=>{
							document.removeEventListener('mousemove',mousemove)
							document.removeEventListener('mouseover',mouseover)
						})
					}
					el.addEventListener('mouseover',mouseover)
				}
				
			},
		},
	},
    methods: {
		handleMouseMove(event) {
			
		},
    },
});
</script>
<style lang="less" scoped>
.magnifyingGlass{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	.initial{
		justify-content: center;
		width: 40%;
		text-align: center;
		.initial_mask{
			overflow: hidden;
			width: auto;
			height: 100%;
			display: inline-block;
			position: relative;
			.initial_img{
				height: 100%;
				width: auto;
				max-width: 100%;
			}
			.initial_haver{
				width: calc(10rem*1.2);
				height: calc(10rem*1.2);
				position: absolute;
				background-color: rgba(0,0,0,.2);
				top: 0;
			}
		}
	}
	.big{
		width: 40%;
		background-position: 0 0;
		background-repeat: no-repeat;
	}
	
}
</style>