aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-27-dist 字体放大

Browse Source
This commit is contained in:
X1627315083
2023-11-27 16:25:32 +08:00
parent 1f52565aad
commit 6e39ebf5ed
50 changed files with 1995 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/component/Detail/magnifyingGlass.vue
View File

@@ -10,6 +10,7 @@
</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({
@@ -35,39 +36,71 @@ export default defineComponent({
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`;
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)
el.addEventListener('touchend',()=>{
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('touchstart',touchstart)
})
}
document.addEventListener('mousemove',mousemove)
el.addEventListener('mouseout',()=>{
document.removeEventListener('mousemove',mousemove)
document.removeEventListener('mouseover',mouseover)
})
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)
}
el.addEventListener('mouseover',mouseover)
},
},