rendering

Decomposition components

Use flex layout overall

The left panel

The details of the panel are passed in through the slot name slot. Title is draggable via prop. To ensure that the content style is not destroyed by dragging, set a maximum/minimum value to the width of the panel

The right side of the panel

The width of the right panel changes as the width of the left panel changes. Note that the width of the content is automatically adapted using Flex-Auto. Need to do mobile adaptive. Adaptive media queries using Tailwind

The parameter decomposition

props

• @param {Number} maxWidth Maximum width
• @param {Number} minWidth Minimum width
• @param {String} leftTitle leftTitle
• @param {String} rightTitle rightTitle?
• @param {Boolean} Whether sotoreage is stored with localStorege

slots

• Left-content {Element} Left content
• Right-content {Element} Specifies the right content

The specific implementation

How do I drag it?

I added a hidden box between the left and right panels. I hid the box in a box-shadow. Specific events are implemented in this div

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

Event listeners

    const hnadleMouseDown = (evt: MouseEvent) = > {
      /* Gets the starting point and stores */
      let { pageX, pageY } = evt;
      basePosition.pageX = pageX;
      basePosition.pageY = pageY;
      /* Monitor mouse movement events */
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    };
    const handleMouseMove = evt= > {
      /* Prevents browser default events from triggering the browser gesture function */
      evt.preventDefault();
      /* Set timer to prevent DOM multiple backflow */
      clearTimeout(timer.value);
      timer.value = setTimeout(() = > {
        let { pageX } = evt;
        const baseDiv = document.querySelector(".right-border-shadow");
        /* Processing width, whether is between the maximum/minimum value */
        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 width-changing events */
        ctx.emit("drugend");
        /* Store to store */
        setStore(baseWidth);
      }, 50);
    };
    const handleMouseUp = evt= > {
      /* After dragging, cancel the event listener and emit the final width */
      const width = document.querySelector(".right-border-shadow")? .clientWidth;document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
      ctx.emit("drugend", width);
    };
Copy the code

The width of the handle

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

To optimize the

Manually change the browser window width

nextTick(() = > {
        ctx.emit("load", ctx);
        MutationObserver = window.MutationObserver;
        if (MutationObserver) {
          /* Listen for browser window changes, in some cases this API is required */
          mo = new MutationObserver(function() {
            const __wm = document.querySelector("#rezie-id");
            // Call __canvasWM again only if the __wm element changes
            if(! __wm) {// Avoid triggering all the time
              mo.disconnect();
              mo = null;
              ctx.emit("resize"); }}); mo.observe(document.querySelector("#rezie-id"), {
            attributes: true.subtree: true.childList: true}); }});Copy the code

Not effective, ask for advice

bug

The slot element node in the onMounted hook of the parent component is null. The current solution is to throw a load event in the onMounted hook of the child component, and the parent component uses onLoad to handle the subsequent logic.

Git address

The warehouse address

Preview the address

Please input your account password without checking

The split panel is used for the ant&echarts menu