vue 鼠标按下左右移动

https://blog.csdn.net/Shuai_YeYe/article/details/110873952

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