<template>
  <div>
      <div
            class="configration mr-10"
            id="configration"
            @mousedown="mousedown"
          >
            <div class="min-h-box">
              
            </div>
          </div>
  </div>
</template>
 mounted() {
    document.addEventListener("mouseup", this.mouseUp);
  },
methods: {
  mouseUp() {
      document.removeEventListener("mousemove", this.mouseMove);
    },
    mouseMove(event) {
      let configration = document.getElementById("configration");
      let configValue = document.getElementById("configValue");
      let dialog = document.getElementsByClassName("dialogResize")[0];
      let endX = event.clientX;
      //彈窗的寬度
      let dialogWidth = dialog.style.width.substring(
        0,
        dialog.style.width.lastIndexOf("px")
      );
      let moveLen = this.startLeft + (endX - this.startX);
      if (moveLen > 200) {
        configration.style.width = moveLen + "px";
        configValue.style.width = Number(dialogWidth) - moveLen + "px";
      }
    },
    mousedown(event) {
      this.startX = event.clientX;
      this.startLeft = event.offsetX;
      document.addEventListener("mousemove", this.mouseMove);
    },

}
    ```