Vue 는 텍스트 를 통 해 부유 상자 효 과 를 표시 하 는 예제 코드 를 구현 합 니 다.

수요
Vue 항목 에서 텍스트 상 자 를 마우스 로 이동 할 때 자세 한 정 보 를 표시 해 야 합 니 다.최종 실현 효 과 는 다음 과 같다.

마우스 가 button 을 지나 갈 때 커서 근처에 부유 상 자 를 표시 할 수 있 습 니 다.상자 안에 시간 과 값 의 정 보 를 표시 하고 마우스 가 button 요 소 를 옮 길 때 이 표시 상 자 는 사라 집 니 다.
분석 하 다.
마우스 이동 이벤트 가 있 습 니 다.
마우스 이벤트 에는 다음 과 같은 몇 가지 가 있 습 니 다.
1.onclick(마우스 클릭 이벤트)

box.onclick = function(e){
  console.log(e)
}

2.onmousedown(마우스 로 이벤트 누 르 기)

box.onmousedown = function(e){
  console.log(e)
}

3.onmouseup(마우스 로 이벤트 풀 기)

box.onmouseup = function(e){
  console.log(e)
}

4.onmousemove(마우스 이동 이벤트)

box.onmousemove = function(e){
  console.log(e)
}

5.onmouseout(마우스 로 이벤트 표시)

box.onmouseout = function(e){
  console.log(e)
}

마우스 마우스 마우스 이벤트 에서 몇 개의 좌 표를 알 아야 합 니까?
1.clientX,clientY 클릭 위치 현재 body 시각 영역 x,y 좌표
2.pageX,pageY 는 전체 페이지 에 볼 륨 된 body 부분의 길 이 를 포함한다.
3.screenX,screenY 클릭 위치 현재 컴퓨터 화면의 x,y 좌표
4.offsetX,offsetY 는 포 지 셔 닝 이 있 는 부모 상자 의 x,y 좌표 에 비해
5.x,y 는 screenX,screenY 와 같다.

이루어지다
내 가 실현 한 사고방식 은 부유 상자 정 보 를 보 여 주 는 기본 적 인 빈 div 를 쓰 는 것 이다.보 여 주 는 부상 상 자 는 절대적 인 위치 입 니 다.처음에는 숨겨 져 있 었 습 니 다.mouseover 이 벤트 를 촉발 할 때 display 를 block 블록 급 요소 로 바 꾸 고 이벤트 이 벤트 를 가 져 옵 니 다.

<div id="mouse" v-if="true" class="version_total">
  </div>
  .version_total{
  position: absolute;
  width: 10%;
  height: 5%;
 }

그 다음 에 진짜 div 에 mousemove 바 인 딩 방법 으로 매개 변수 와 이벤트 이 벤트 를 전달 합 니 다.이 방법 에서 스타일 을 바 꾸 고 마지막 으로 innerHtml 로 보 여 줍 니 다.부유 상자 의 div 요소 에 top 과 left 속성 을 설정 해 야 합 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.

{{yxInfo[28].keyName}}

detailInfo(e,data){
    var showDiv = document.getElementById('mouse')
    showDiv.style='background-color:#8c8c8c;border:1px solid black'
    showDiv.style.height='58px'
    showDiv.style.textAlign='left'
    showDiv.style.left = (event.pageX-300) + 'px'
    showDiv.style.top = (event.pageY-120) + 'px'
    showDiv.style.display = 'block'
    let time=data.time;
    let keyValue=data.value;
    var html ="<p>"+"  :"+time+"</p>";
    var html2 ="<p>"+" :"+keyValue+"</p>";
    showDiv.innerHTML = html+html2
   },
leave($event){
    var showDiv = document.getElementById('mouse')
    showDiv.style.display = 'none'
    showDiv.innerHTML = ''
}

Vue 가 텍스트 를 통 해 부유 상자 효 과 를 보 여 주 는 예제 코드 를 구현 하 는 글 을 소개 합 니 다.더 많은 Vue 마우스 부유 상자 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!