vue鼠标点击移动改变两个并排Div的宽度

效果图

代码

<template>
  <div class="root" ref="root">
    <div class="left" ref="left"></div>
    <div class="center" ref="center">
      <img
        src="../../assets/imgs/icons/拉伸.png"
        alt="拉伸"
        @mousedown="lashen"
        draggable="false"
        ref="img"
      />
    </div>
    <div class="right" ref="right"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDown: false,
    };
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    lashen(event) {
      var _this = this;
      // 获取event对象，兼容性写法
      var ev = event || window.event;
      // 鼠标按下时的位置
      var mouseDownX = ev.clientX;
      // 左边位置
      var L0 = this.$refs.left.offsetLeft;
      // 左边宽度
      var Wl = this.$refs.left.offsetWidth;

      window.onmousemove = function (event) {
        var e = event || window.event;
        // 鼠标移动时的鼠标位置
        var mouseMoveX = e.clientX;
        _this.$refs.left.style.width = mouseMoveX - mouseDownX + Wl + "px";
        _this.$refs.right.style.width =
          _this.$refs.root.offsetWidth -
          _this.$refs.left.offsetWidth -
          _this.$refs.center.offsetWidth +
          "px";
      };
      window.onmouseup = function () {
        window.onmousemove = null;
        return;
      };
    },
  },
};
</script>

<style scoped>
.root {
  width: 100%;
  min-width: 1300px;
  height: auto;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.left {
  width: 37.5%;
  height: 100px;
  background-color: red;
}
.center {
  width: 20px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.center img {
  display: block;
  width: 20px;
  cursor: pointer;
}
.right {
  width: calc(62.5% - 30px);
  height: 100px;
  background: #0c84f5;
}