vue 3 드래그 가능 한 좌우 패 널 분할 구성 요소 구현

최근 vue 를 사용 할 때 수요 가 생 겼 습 니 다.좌우 div 를 실현 하면 중간 부분 을 끌 어 당 겨 서 폭 을 조정 할 수 있 습 니 다.본 고 는 정리 하고 공유 하 겠 습 니 다.구체 적 으로 다음 과 같 습 니 다.
효과 도

분해 모듈
전체 flex 레이아웃 사용
왼쪽 판 넬
4.567917.패 널 의 구체 적 인 내용 은 slot 서명 슬롯 을 통 해 들 어 옵 니 다

title 은 prop 을 통 해 들 어 옵 니 다

4.567917.드래그 할 수 있 습 니 다.내용 스타일 이 드래그 되 지 않도록 패 널 의 너비 에 최대 치/최소 치 를 설정 합 니 다오른쪽 판 넬
4.567917.오른쪽 판 넬 의 너 비 는 왼쪽 판 넬 의 너비 에 따라 달라 집 니 다.여기 서 주의해 야 할 것 은 내용 의 너 비 는 flex-auto 를 사용 하여 자동 으로 적응 합 니 다4.567917.이동 단의 자가 적응 이 필요 하 다tailwind 를 사용 하 는 미디어 조회 에 적응 합 니 다
입 참 분해
props
@param{Number}max Width 최대 너비@param{Number}minWidth 최소 너비@param{String}leftTitle 왼쪽 제목@param{String}오른쪽 제목 오른쪽 제목?

@param{Boolean}sotoreage 저장 여부 와 localstorege

slots

left-content {Element}  왼쪽 내용
right-content{Element}오른쪽 내용

구체 적 실현
어떻게 드래그 합 니까?
왼쪽 판 넬 과 오른쪽 판 넬 사이 에 숨겨 진 상 자 를 추가 합 니 다.저 는 이 상 자 를 box-shadow 에 숨 깁 니 다.구체 적 인 사건 은 이 div 에서 이 루어 집 니 다.

<div id="line" class="w-2 cursor-move hidden md4:block"onMousedown={hnadleMouseDown}>
</div>

사건 감청

    const hnadleMouseDown = (evt: MouseEvent) => {
      /*       ，    */
      let { pageX, pageY } = evt;
      basePosition.pageX = pageX;
      basePosition.pageY = pageY;
      /*           */
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    };
    const handleMouseMove = evt => {
      /*          ，             */
      evt.preventDefault();
      /*      ，  dom     */
      clearTimeout(timer.value);
      timer.value = setTimeout(() => {
        let { pageX } = evt;
        const baseDiv = document.querySelector(".right-border-shadow");
        /*     ，       /      */
        let baseWidth: Number | undefined =
          Number(baseDiv?.clientWidth) + (pageX - basePosition.pageX);
        baseWidth =
          baseWidth > Number(props?.maxWidth) ? props.maxWidth : baseWidth;
        baseWidth =
          Number(baseWidth) < Number(props?.minWidth)
            ? props.minWidth
            : baseWidth;
        baseDiv?.setAttribute("style", `width:${baseWidth}px`);
        /* emit        */
        ctx.emit("drugend");
        /*    store */
        setStore(baseWidth);
      }, 50);
    };
    const handleMouseUp = evt => {
      /*       ，      ， emit      */
      const width = document.querySelector(".right-border-shadow")?.clientWidth;
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
      ctx.emit("drugend", width);
    };

너비 처리

style={`width:${
            store.get("split-width")
              ? store.get("split-width")
              : props.minWidth
              ? props.minWidth
              : 384
          }px`}

최적화 하 다.
브 라 우 저 창 너비 수 동 변경

nextTick(() => {
        ctx.emit("load", ctx);
        MutationObserver = window.MutationObserver;
        if (MutationObserver) {
          /*           ，          api */
          mo = new MutationObserver(function() {
            const __wm = document.querySelector("#rezie-id");
            //   __wm          __canvasWM
            if (!__wm) {
              //       
              mo.disconnect();
              mo = null;
              ctx.emit("resize");
            }
          });
          mo.observe(document.querySelector("#rezie-id"), {
            attributes: true,
            subtree: true,
            childList: true,
          });
        }
      });

효력 이 발생 하지 않 았 습 니 다.
bug
부모 구성 요소 의 onMounted 갈고리 에서 하위 요 소 를 가 져 오 는 slot 요소 노드 가 잘못 되 었 습 니 다.null 입 니 다.현재 해결 방법 은 하위 구성 요소 의 onMounted 갈고리 에서 load 이 벤트 를 던 지 는 것 입 니 다.부모 구성 요 소 는 onLoad 를 사용 하여 다음 논 리 를 처리 합 니 다.
git 주소
창고 주소
미리 보기 주소
vue 3 드래그 가능 한 좌우 패 널 분할 구성 요소 구현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 3 드래그 가능 좌우 분할 패 널 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!