vue 에서 드래그 변경 에 iframe 이 존재 하 는 div 큰 시간 카드 문 제 를 해결 합 니 다.

맨 앞 에 쓰다
vue 에서 드래그 하여 두 개의 div 크기 를 바 꾸 는 방식 에 대해 서 는 이전 글 인 을 보십시오.이 글 은 실제 응용 프로그램 에서 크기 를 바 꿔 야 하 는 구성 요소 에서 iframe 프레임 워 크 를 사용 할 때 뚜렷하게 걸 리 는 문제 가 존재 합 니 다.예 를 들 어 오른쪽 div 에서 iframe 구성 요 소 를 사용 하여 실제 작업 에서 두 가지 문제 가 발생 했 습 니 다.하 나 는 끌 리 지 않 고 다른 하 나 는 마우스 에 따라 이동 하지 못 하고 빠 른 응답 을 할 수 없습니다.심지어 도청 마우스 의 누 르 기와 풀 기 사건 에 도 뚜렷 한 카드 문제 가 있다.오른쪽 iframe 프레임 을 제거 하면 문제 가 없습니다.
iframe 상황 이 있어 요.

iframe 없 음


문제 원인&해결 사고
문제 의 원인 을 나 는 모 르 지만 이 블 로 그 는 나 에 게 해결 방향 을 주 었 다.그리고 다음 과 같은 주장 도 있다.그들의 해결 방향 은 같다.따라서 마우스 의 감청 에 영향 을 미 친 것 으로 추정 된다.우리 가 끌 때 너무 빨리 끌 면 마우스 가 끌 어 당 기 는 범 위 를 초과 하 는 상황 이 발생 하기 쉽다.이때 마 우 스 는 iframe 위 에 있어 iframe 의 내용 을 동시에 불 러 와 서 렉 이 걸 릴 수 있다.
한 마디 로 하면 해결 의 방향 은 드래그 할 때 iframe 위 에 투명 한 커버 층 을 추가 한 다음 드래그 를 멈 출 때 사라 지게 하 는 것 이다.이렇게 하면 문 제 를 완벽 하 게 해결 할 수 있다.

해결 방식 은 모두 두 마디 가 있 습 니 다.하 나 는 제 가 해결 하 는 과정 에서 겪 은 문 제 를 포함 하고 하 나 는 직접적인 해결 방식 입 니 다.해결 방식 을 직접 보 려 면 해결 방식 으로 바로 넘 어가 세 요.
해결 방식(해결 과정 에서 발생 하 는 문제 포함)
HTML 구성 요소 부분 소스 코드
이것 은 드래그 를 실현 하 는 구성 요소 코드 입 니 다.제 가 원래 사용 하 는 실현 방식 을 모 르 면 을 참고 하 십시오.

<div class="box" ref="box">
   <div class="left" ref="left">

   </div>
   <div class="resize" ref="resize" title="     ">
    ⋮
   </div>
   <div class="mid" ref="mid">
    <!--        -->
    <iframe id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0" scrolling="auto"
      :src="iframeUrl">
    </iframe>
   </div>
  </div>

커버 층 추가
위 에 표 시 된 곳 에 다음 코드 를 추가 합 니 다.

<div class="iframeDiv"></div>

마스크 층 의 css 스타일 을 추가 하면 됩 니 다.이때 클릭 하 는 것 이 좋 습 니 다.원래 ifame 부분 에서 클릭 할 수 없 는 지,끌 어 올 리 면 더 이상 멈 추 지 않 습 니 다.

/*         */ 
.iframeDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1111;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;
  margin-top: 30px;
  /*display: none;*/
 }

커버 층 이 끌 어 당 길 때 나타 나 는 것 을 실현 합 니 다.
제 해결 방법 은 드래그 영역 에 감청 마 우 스 를 직접 추가 하고 이 벤트 를 풀 어 주 는 것 입 니 다.누 르 면 커버 층 이 나타 나 고 풀 면 사라 집 니 다.따라서 resize 부분 을 수정 하고 onmouseup&mousedown 을 추가 하여 각각 인 자 를 입력 하여 iframeDiv 의 css 스타일 의 display 속성 값 을 수정 하 는 데 사 용 됩 니 다.

<div class="resize" ref="resize" @mousedown="changeIframeDivStyle('')" @onmouseup="changeIframeDivStyle('none')" >
　　⋮
 </div>

그리고 changeIframeDivStyle 방법 을 추가 합 니 다.getElement ByClassName 은 배열 집합 으로 되 돌아 갑 니 다.하지만 저 는 제 페이지 에 iframeDiv 가 하나 밖 에 없다 는 것 을 확 인 했 기 때문에 iframe[0]을 선 택 했 습 니 다.getElement ById 를 사용 하려 면

changeIframeDivStyle(display) {
    var iframeDiv = document.getElementsByClassName('iframeDiv');
    iframeDiv[0].style.display = display;
   }, 

이 기본 은 절반 이상 이 완 료 된 셈 입 니 다.mousedown 은 마우스 로 이 벤트 를 누 르 고 누 른 후에 display 를 비어 있 게 설정 합 니 다.즉,마스크 층 이 나타 나 고 onmouseup 은 마우스 로 이 벤트 를 풀 고 풀 면 마스크 층 이 사라 지 며 사용자 의 조작 에 영향 을 주지 않 고 iframe 의 내용 을 보 는 목적 을 달성 합 니 다.
페이지 초기 화 시 마스크 층 설정 문제
실제 적 으로 페이지 에 들 어 갈 때 우 리 는 마스크 층 을 남 겨 두 지 말 아야 합 니 다.그래서 제 생각 에는 css 에서 직접 스타일 을 수정 하 는 것 입 니 다.그러나 위 에서 보 듯 이 제 가 주석 을 달 았 습 니 다.왜 그런 지 에 대해 서 는 먼저 관 을 팔 고 수정 한 후에 드래그 할 때 끊 기지 않 는 지 보 세 요.

display: none;

내 가 이렇게 하면 문 제 를 해결 할 수 있다 고 생각 했 을 때,나 는 처음으로 페이지 에 들 어가 서 직접 끌 면 여전히 렉 이 존재 하지만,한 번 끌 면 다 시 는 문제 가 없 을 것 이라는 것 을 발견 했다.이 문 제 는 왜 그런 지 모 르 겠 습 니 다.그래서 한 번 끌 어야 멈 추 지 않 습 니 다.그러면 저 는 css 에 있 는 이 display 스타일 을 직접 설명 하고 mounted 에 방법 을 추가 하 는 데 성 공 했 습 니 다.오히려 이들 의 차 이 를 모 르 겠 지만 문 제 는 해결 되 었 습 니 다.이 유 를 아 는 친구 가 있다 면...여러분 이 공부 할 수 있 도록 댓 글 에 공유 할 수 있 습 니 다.

this.changeIframeDivStyle('none');

해결 방법
iframe 에 투명 커버 층 스타일 추가

<div class="box" ref="box">
   <div class="left" ref="left">

   </div>
   <div class="resize" ref="resize" title="     ">
    ⋮
   </div>
   <div class="mid" ref="mid">
    <!--        -->
   <div class="iframeDiv"></div>
    <iframe id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0" scrolling="auto"
      :src="iframeUrl">
    </iframe>
   </div>
  </div>  

CSS 스타일 추가

 .iframeDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1111;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;
  margin-top: 30px;
  /*display: none;*/
 }

마우스 감청 이벤트 추가
드래그 영역 에 마 우 스 를 추가 하 는 이벤트 와 이벤트 풀 기

 <div class="resize" ref="resize" @mousedown="changeIframeDivStyle('')" @onmouseup="changeIframeDivStyle('none')" >
　　⋮
 </div>

추가 방법

changeIframeDivStyle(display) {
    var iframeDiv = document.getElementsByClassName('iframeDiv');
    iframeDiv[0].style.display = display;
   },

페이지 초기 화 불 러 오기 설정

this.changeIframeDivStyle('none');

vue 에서 드래그 변경 에 존재 하 는 iframe 의 div 큰 시간 카드 문 제 를 해결 하 는 글 을 소개 합 니 다.vue 드래그 div 카드 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!