边框拖拽功能

<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);
    },

}
    ```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天星期三。 今天早晨我7点醒了,就没再睡回笼觉。 今天上午退休的原财务处处长于姨来单位办事,她正在给孩子办低保,...
  • 饮食坏习惯致胃胀气 如何缓解有妙招 胃胀气是一种较为常见的胃部疾病症状,主要表现为饱胀感,胃部外凸,常放屁,有些还...
    帕金森大健康阅读 38评论 0 0
  • 今日体验:工作是治愈一切最好的良药,在每一件细节每一个工作中认真对待,持续的改善,才有可能会成为跟别人完全的不同。
    冰女孩阅读 40评论 0 0
  • 明知别人是故意的,自己却选择原谅。对于生活中这些装腔作势的人,对于这些不知自己检点自己的人。我们真没必要把时间耗在...
    50951356a1f4阅读 39评论 0 1
  • 《生命如花爱如蜜》发布“感念相恋”版预告片 倾心相恋 许一世安暖 2024年1月19日 携爱而来 镌刻倾世之恋
    森森文艺阅读 19评论 0 0