2023-10-20

2023-10-20 17:21:45 +08:00
parent 12ef707f64
commit bd9dabd21d
29 changed files with 1401 additions and 385 deletions
--- a/src/component/Detail/magnifyingGlass.vue
+++ b/src/component/Detail/magnifyingGlass.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="magnifyingGlass">
+		<div class="initial">
+			<div class="initial_mask" v-mousemove>
+				<img class="initial_img" :src="designItemDetailUrl" alt="">
+				<div class="initial_haver"></div>
+			</div>
+		</div>
+		<div class="big"></div>
+    </div>
+</template>
+<script>
+import { defineComponent, createVNode, ref,Ref} from "vue";
+import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
+export default defineComponent({
+    components: {
+        DownOutlined,
+        UserOutlined,
+    },
+	props: ['designItemDetailUrl'],
+	setup(){
+	return{
+		}
+    },
+	watch:{
+	},
+    data() {
+        return {
+        };
+    },
+   mounted() {
+	
+	},
+	directives:{
+		mousemove:{
+			
+			mounted (el,binding) {
+				
+				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: 10rem;
+				height: 10rem;
+				position: absolute;
+				background-color: rgba(0,0,0,.2);
+				top: 0;
+			}
+		}
+	}
+	.big{
+		width: 40%;
+		background-position: 0 0;
+		background-repeat: no-repeat;
+	}
+	
+}
+</style>