vue 에서 좌우 양쪽 div 의 폭 을 드래그 하여 조정 하 는 예제 코드 를 실현 합 니 다.

맨 앞 에 쓰다
최근 vue 를 사용 할 때 필요 한 것 이 있 습 니 다.좌우 div 는 중간 부분 드래그 를 통 해 폭 을 조정 할 수 있 습 니 다.이와 같 습 니 다.

이것 은 나의 최종 실현 효과 이다.

아니면 옛말 에 저 는 전문 적 인 전단 엔지니어 가 아니 라 간단 한 전단 을 겸직 해서 썼 기 때문에 이 기능 의 실현 은 다음 과 같은 블 로그'vue 드래그 좌우 양측 div 의 폭 조정','vuejs 에서 드래그 하여 원소 의 폭 을 바 꾸 어 너비 적응 크기 를 실현 합 니 다'덕분 입 니 다.저 는 그들 이 제공 한 코드 에 대해 억 개의 세부 사항 을 추 가 했 을 뿐 입 니 다.
실현 원리

위의 그림 에서 보 듯 이 이 기능 을 실현 하려 는 페이지 를 세 부분 으로 나 누 어야 합 니 다.왼쪽,조정 구역,오른쪽 은 각각 css 스타일 에 대응 하 는 left,resize,mid 입 니 다.그리고 이 세 개의 div 를 css 스타일 을 box 의 div 에 두 면 됩 니 다.
구현 코드-HTML 부분
다음 코드 를 vue 페이지 파일 에탭 에 배치 하면 됩 니 다.

 <div class="box" ref="box">
   <div class="left">
    <!--  div  -->
   </div>
   <div class="resize" title="     ">
    ⋮
   </div>
   <div class="mid">
    <!--  div  -->
   </div>
  </div>

구현 코드-CSS 부분
아래 코드 를탭 에 배치 하면 됩 니 다.

 /*        */
 /*  div  */
 .box {
  width: 100%;
  height: 100%;
  margin: 1% 0px;
  overflow: hidden;
  box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
 }
 /*  div  */
 .left {
  width: calc(32% - 10px); /*       */ 
  height: 100%;
  background: #FFFFFF;
  float: left;
 }
 /*   div  */
 .resize {
  cursor: col-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
 }
 /*         */
 .resize:hover {
  color: #444444;
 }
 /*  div'  */
 .mid {
  float: left;
  width: 68%; /*       */
  height: 100%;
  background: #fff;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
 }

구현 코드-드래그 이벤트 부분
아래 코드 를 methods 방법 구역 에 두 면 됩 니 다.

dragControllerDiv: function () {
    var resize = document.getElementsByClassName('resize');
    var left = document.getElementsByClassName('left');
    var mid = document.getElementsByClassName('mid');
    var box = document.getElementsByClassName('box');
    for (let i = 0; i < resize.length; i++) {
     //       
     resize[i].onmousedown = function (e) {
      //      
      resize[i].style.background = '#818181';
      var startX = e.clientX;
      resize[i].left = resize[i].offsetLeft;
      //       
      document.onmousemove = function (e) {
       var endX = e.clientX;
       var moveLen = resize[i].left + (endX - startX); // （endx-startx）=     。resize[i].left+     =         
       var maxT = box[i].clientWidth - resize[i].offsetWidth; //      -         =        

       if (moveLen < 32) moveLen = 32; //           32px
       if (moveLen > maxT - 150) moveLen = maxT - 150; //         150px

       resize[i].style.left = moveLen; //          

       for (let j = 0; j < left.length; j++) {
        left[j].style.width = moveLen + 'px';
        mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
       }
      };
      //       
      document.onmouseup = function (evt) {
       //    
       resize[i].style.background = '#d6d6d6';
       document.onmousemove = null;
       document.onmouseup = null;
       resize[i].releaseCapture && resize[i].releaseCapture(); //                    ReleaseCapture()   
      };
      resize[i].setCapture && resize[i].setCapture(); //                      
      return false;
     };
    }
   },

그리고 mouted 에서 로 딩 부분 을 초기 화하 여 추가 하면 됩 니 다.

this.dragControllerDiv();

결어
상기 코드 는 좌우 div 드래그 확대 축 소 를 실현 할 수 있 지만 실제 응용 에서 저 는 더욱 까다 로 운 문제 에 부 딪 혔 습 니 다.그것 은 특정한 div 에서 iframe 프레임 워 크 를 사용 하면 드래그 할 때 현저 한 카드 가 존재 합 니 다.만약 에 사용 하 는 과정 에서 이 문제 가 발생 하면 제 다음 글vue 에서 드래그 변경 에 iframe 이 존재 하 는 div 큰 시간 카드 문 제 를 해결 합 니 다.을 볼 수 있 습 니 다.
vue 에서 좌우 양쪽 div 의 폭 을 드래그 하여 조정 하 는 예제 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 드래그 조정 좌우 양쪽 div 너비 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!