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

本文主要是介绍vue鼠标点击移动改变两个并排Div的宽度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图

代码

<template><div class="root" ref="root"><div class="left" ref="left"></div><div class="center" ref="center"><imgsrc="../../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;
}