Implementierung einer verschiebbaren Komponente zum Teilen des linken und rechten Bedienfelds in Vue3

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

    const hnadleMouseDown = (evt: MouseEvent) => {
      /* Startpunkt abrufen und speichern*/
      let { SeiteX, SeiteY } = evt;
      BasisPosition.SeiteX = SeiteX;
      BasisPosition.seiteY = SeiteY;
      /* Auf Mausbewegungsereignisse achten*/
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    };
    const handleMouseMove = evt => {
      /* Verhindern Sie, dass Standardereignisse des Browsers die Gestenfunktion des Browsers auslösen*/
      evt.preventDefault();
      /* Stellen Sie den Timer ein, um ein mehrmaliges Reflowing des DOM zu verhindern*/
      Zeitüberschreitung löschen(Timer.Wert);
      timer.value = setTimeout(() => {
        let { SeiteX } = evt;
        const baseDiv = document.querySelector(".right-border-shadow");
        /* Prozessbreite, ob sie zwischen dem Maximal-/Minimalwert liegt*/
        let baseWidth: Zahl | undefiniert =
          Zahl(BasisDiv?.ClientBreite) + (SeiteX - BasisPosition.SeiteX);
        Basisbreite =
          Basisbreite > Zahl (Eigenschaften?.maxBreite) – Eigenschaften.maxBreite: Basisbreite;
        Basisbreite =
          Zahl (Basisbreite) < Zahl (Eigenschaften?.Mindestbreite)
            ? props.minBreite
            : Basisbreite;
        baseDiv?.setAttribute("Stil", `Breite: ${baseWidth}px`);
        /* Ereignis „Breite geändert“ ausgeben */
        ctx.emit("Wirkstoffend");
        /* Von Speicher zu Speicher */
        setStore(Basisbreite);
      }, 50);
    };
    const handleMouseUp = evt => {
      /* Nach Beendigung des Ziehens das Abhören des Ereignisses abbrechen und die endgültige Breite ausgeben*/
      const width = document.querySelector(".right-border-shadow")?.clientWidth;
      document.removeEventListener("mousemove", handleMouseMove);
      Dokument.removeEventListener("mouseup", handleMouseUp);
      ctx.emit("Drugend", Breite);
    };

Stil={`Breite:${
            store.get("geteilte Breite")
              ? store.get("geteilte Breite")
              : props.minBreite
              ? props.minBreite
              : 384
          }px`}

nächsterTick(() => {
        ctx.emit("laden", ctx);
        MutationObserver = Fenster.MutationObserver;
        wenn (MutationObserver) {
          /* Änderungen im Browserfenster überwachen, diese API ist in einigen Fällen erforderlich */
          mo = neuer MutationObserver(Funktion() {
            const __wm = document.querySelector("#rezie-id");
            // __canvasWM nur erneut aufrufen, wenn sich das __wm-Element ändert
            wenn (!__wm) {
              //Vermeiden Sie, ständig mo.disconnect() auszulösen;
              mo = null;
              ctx.emit("Größe ändern");
            }
          });
          mo.observe(document.querySelector("#rezie-id"), {
            Attribute: true,
            Teilbaum: wahr,
            Kinderliste: wahr,
          });
        }
      });