Vue 3.0 자체 확대경 효과 실현 사례 설명

실현 해 야 할 효 과 는 고정 확대 두 배,마우스 가 왼쪽 그림 영역 에 들 어 갈 때 커버 층 이 표시 되 고 떠 날 때 커버 층 이 숨겨 집 니 다.

 css 의 cursor
https://www.runoob.com/cssref/pr-class-cursor.html  
마우스 가 효과 에 따라 어떻게 실현 되 는 지:(하위 부모 상)절대 포 지 셔 닝+  top,left 제어 이동 수정 
@vueuse 에서 도구 방법 이 있 습 니 다:useMouse InElement

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>
 
<script>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'
 
export default {
  setup() {
    const target = ref(null)
 
    const { x, y, isOutside } = useMouseInElement(target)
 
    return { x, y, isOutside }
  }
}
</script>

Vueuse 입 니 다. 홈 페이지 의 용법,마지막 으로 return{target}을 잊 지 마 세 요.저 는 처음에 return target,x,y,isOutside 의 값 이 0,0,false 였 습 니 다.변 화 된 값 이 아 닙 니 다.
 마우스 의 위치 와 가 려 진 위치 사이 의 관계: 
 

 <div class="layer" :style="layerStyle"></div> //     
setup(){   //            
const layerStyle = reactive({
      top: '0px',
      left: '0px'
    })
    //         ,watch        
    watch([elementX, elementY, isOutside], () => {
      // layerStyle.left = elementX.value / 2 + 'px'
      // layerStyle.top = elementY.value / 2 + 'px'
      let top = elementY.value - 100
      let left = elementX.value - 100
 
      //          
      if (top < 0) top = 0
      if (top > 200) top = 200
      if (left < 0) left = 0
      if (left > 200) left = 200
      layerStyle.top = top + 'px'
      layerStyle.left = left + 'px'
    })
    return { elementX, elementY, isOutside, target, layerStyle }
 
}

커버 구역 은 왼쪽 의 부모 상 자 를 초과 해 서 는 안 됩 니 다.위 에 두 줄 은 제 가 주석 한 코드 입 니 다.왜 합쳐서 쓰 면 안 됩 니까?왜냐하면 뒤에 제 가 판단 을 해 야 할 때 판단 이 끝 난 후에 발견 할 수 있 기 때 문 입 니 다.  px 를 추가 할 때 손 댈 수 없 는 것 을 발견 할 수 있 습 니 다.위 에 이렇게 나 누 어 쓰 면 top,left 는 하나의 수치 일 뿐 입 니 다.계산 이 끝 난 후에 단 위 를 추가 합 니 다. 
 
확대 효 과 는 어떻게 실현 합 니까?  
css 스타일 에는 background-size 속성 이 있 습 니 다.첫 번 째 매개 변 수 는 너비,두 번 째 매개 변 수 는 높이 를 가리 키 며 그림 을 확대 할 수 있 습 니 다.
그 자체 가 400*400 이 고 두 배로 확대 하면 800*800 입 니 다.
css 스타일 의 background-position-x, background-position-y 지정 영역 확대 가능
background-position:x,y 에 대하 여   첫 번 째 값 은 수평 위치 이 고,두 번 째 값 은 수직 위치 이다.
 이것 은 오른쪽 확대 효과 가 있 는 div:

 <div class="large" :style="{ backgroundImage:`url(${images[current]})`,...largeStyle }"></div>

이것 은 css 코드 입 니 다.참고 하 시기 바 랍 니 다. 

 .large {
   position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-repeat: no-repeat;
    background-size: 800px 800px;
    background-color: #f8f8f8;
 }

마지막:마우스 가 왼쪽 상자 영역 을 옮 기 면 마스크 가 숨 어 있 고 오른쪽 에 확 대 된 상자 도 숨 깁 니 다.
useMouse InElement 의 isOutSide 속성 은 모니터링 요 소 를 초과 하 는 지,v-show="!isOutSide"하면 됩 니 다.
여기 서 Vue 3.0 자체 확대경 효과 실현 사례 에 대한 설명 은 여기까지 입 니 다.더 많은 Vue 3.0 확대경 효과 실현 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 해 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!