vue3 可拖動的左右面板分割組件實現(xiàn)

更新時間：2021年06月02日 09:43:25 作者：我不愛吃魚啦

最近在使用vue的時候,遇到一個需求,實現(xiàn)左右div可通過中間部分拖拽調(diào)整寬度，本文就整理一下，分享給大家，有興趣的可以學(xué)習(xí)

分解組件

整體使用flex布局

左側(cè)面板

面板的具體內(nèi)容通過slot具名插槽傳入。
title通過prop傳入
可拖動，為了保證內(nèi)容樣式不會被拖動所破壞，對面板的寬度設(shè)定最大值/最小值

右側(cè)面板

右側(cè)面板寬度隨著左側(cè)面板的寬度變化而變化，此處需注意，內(nèi)容的寬度使用flex-auto自動適應(yīng)。
需要做移動端的自適應(yīng)。
自適應(yīng)使用tailwind的媒體查詢

入?yún)⒎纸?br />

props

@param {Number} maxWidth 最大寬度
@param {Number} minWidth 最小寬度
@param {String} leftTitle 左標(biāo)題
@param {String} rightTitle 右標(biāo)題？
@param {Boolean} sotoreage 是否存儲與localstorege

slots

left-content {Element} 左側(cè)內(nèi)容
right-content {Element} 右側(cè)內(nèi)容

具體實現(xiàn)

如何拖動呢？

在左側(cè)面板與右側(cè)面板之間添加一個隱藏的盒子，我將這個盒子隱藏在box-shadow之中。具體事件放在這個div中實現(xiàn)

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

事件監(jiān)聽

    const hnadleMouseDown = (evt: MouseEvent) => {
      /* 獲取起始點位，并存儲 */
      let { pageX, pageY } = evt;
      basePosition.pageX = pageX;
      basePosition.pageY = pageY;
      /* 監(jiān)聽鼠標(biāo)的移動事件 */
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    };
    const handleMouseMove = evt => {
      /* 阻止瀏覽器默認(rèn)事件，防止觸發(fā)瀏覽器的手勢功能 */
      evt.preventDefault();
      /* 設(shè)置定時器，防止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 => {
      /* 結(jié)束拖動之后，取消事件監(jiān)聽，并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`}

優(yōu)化

手動改變?yōu)g覽器視窗寬度

nextTick(() => {
        ctx.emit("load", ctx);
        MutationObserver = window.MutationObserver;
        if (MutationObserver) {
          /* 監(jiān)聽瀏覽器的窗口變化，在部分情況下需要這個api */
          mo = new MutationObserver(function() {
            const __wm = document.querySelector("#rezie-id");
            // 只在__wm元素變動才重新調(diào)用 __canvasWM
            if (!__wm) {
              // 避免一直觸發(fā)
              mo.disconnect();
              mo = null;
              ctx.emit("resize");
            }
          });
          mo.observe(document.querySelector("#rezie-id"), {
            attributes: true,
            subtree: true,
            childList: true,
          });
        }
      });

未生效，求指點