可以拉伸的DIV

该方法可以去自由拉伸div盒子的宽度。

这是原本的样式，只是一个flex布局的两个div盒子。

<template>
    <div class="screen-view">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</template>
<script>
export default {
    name: '',
    data() {
        return {}
    },
}
</script>
<style lange='scss' scoped>
.screen-view {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;

    .left {
        width: 200px;
        height: 100%;
        margin-right: 10px;
        border: 1px solid #ccc;

    }

    .right {
        width: calc(100% - 200px - 10px);
        height: 100%;
        border: 1px solid #ccc;
    }
    
}
</style>

使用下面的方法以后就可以实现自由拉伸。

// @/utils/drag

export const dragController = function () {
  let resize = []
  const left = document.getElementsByClassName("drag-box-content-left");
  const mid = document.getElementsByClassName("drag-box-content-right");
  const box = document.getElementsByClassName("drag-box-content");
  if (left.length) {
    const child = document.createElement("div");
    child.className ="drag-box-content-left-resize";
    left[0].appendChild(child);
    resize = document.getElementsByClassName(
      "drag-box-content-left-resize"
    );
  }
  for (let i = 0; i < resize.length; i++) {
    resize[i].onmousedown = function (e) {
      resize[i].style.background = "#0af";
      const startX = e.clientX;
      resize[i].left = resize[i].offsetLeft;
      document.onmousemove = function (e) {
        const endX = e.clientX;
        let moveLen = resize[i].left + (endX - startX);
        let maxT = box[i].clientWidth - resize[i].offsetWidth;

        if (moveLen < 1) moveLen = 1; // 左边区域的最小宽度为1px
        if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

        resize[i].style.left = moveLen;
        for (let j = 0; j < left.length; j++) {
          left[j].style.width = moveLen + "px";
          mid[j].style.width = box[i].clientWidth - moveLen - 22 + "px";
        }
      };
      document.onmouseup = function (evt) {
        resize[i].style.background = "#d6d6d6";
        document.onmousemove = null;
        document.onmouseup = null;
        resize[i].releaseCapture && resize[i].releaseCapture();
      };
      resize[i].setCapture && resize[i].setCapture();
      return false;
    };
  }
};

<template>
    <!-- 加上类名 -->
    <div class="screen-view drag-box-content">
        <div class="left drag-box-content-left"></div>
        <div class="right  drag-box-content-right"></div>
    </div>
</template>
<script>
// 引入方法
import { dragController } from "@/utils/drag";
export default {
    name: '',
    data() {
        return {}
    },
    mounted() {
        // 调用方法
        dragController();
    },
}
</script>
<style lange='scss' scoped>
.screen-view {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;


    .left {
        width: 200px;
        height: 100%;
        margin-right: 10px;
        border: 1px solid #ccc;
    }

    .right {
        width: calc(100% - 200px - 10px);
        height: 100%;
        border: 1px solid #ccc;
    }
}
</style>