代码如下，注释部分为vue3 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
.app {
width: 100%;
height: 100%;
background: linear-gradient(to right, #3EC5FF, #3364FF);
display: flex;
}
.left,
.middle,
.right {
height: 98%;
background-color: white;
}
.left {
width: 200px;
}
.middle {
flex: 1;
margin: 0 30px;
}
.right {
width: 200px;
position: relative;
}
.resize-el {
cursor: w-resize;
position: absolute;
width: 30px;
height: 100%;
left: 0;
top: 0;
z-index: 997;
}
</style>
</head>
<body>
<div class="app">
<div class="left"></div>
<div class="middle"></div>
<div class="right" id="drag">
<!-- @mousedown="onmousedown" -->
<div class="resize-el" onmousedown="handleMouseDown(event)"></div>
</div>
</div>
</body>
<script>
const handleMouseDown = (e) => {
// const elW = fileAiRef.value.clientWidth;
// const clientX = e.clientX;
// document.onmousemove = function (event) {
// event.preventDefault();
// fileAiRef.value.style.width = elW + (clientX - event.clientX) + "px";
// fileAiRef.value.style.transition = "none";
// };
const drag = document.getElementById("drag");
console.log(drag)
const elW = drag.clientWidth;
const clientX = e.clientX;
document.onmousemove = function (event) {
event.preventDefault();
drag.style.width = elW + (clientX - event.clientX) + "px";
drag.style.transition = "none";
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</html>
