<template>
<div class="app-container">
<div class="drag-layout">
<div class="left-panel" :style="{ width: leftWidth + 'px' }">
<!-- 左侧 -->
<div style="height: 85vh;">
左侧显示区域
</div>
</div>
<div class="resizer" @mousedown="startDrag" />
<div class="right-panel">
右侧显示区域
</div>
</div>
</div>
</template>
<script setup>
//#region 拖拽改变宽度
const leftWidth = ref(400); // 初始左侧区域宽度
let initialX = 0;
let initialWidth = 0;
let resizer = null;
const startDrag = (e) => {
// 记录拖拽条的 DOM 元素
resizer = e.target;
// 记录鼠标初始位置和宽度初始值
initialX = e.clientX;
initialWidth = leftWidth.value;
// 监听鼠标移动和松开事件
window.addEventListener('mousemove', whileDragging);
window.addEventListener('mouseup', endDrag);
};
const whileDragging = (e) => {
// 计算鼠标移动的距离,并更新左侧区域的宽度
const x = e.clientX - initialX;
if (initialWidth + x > 900) {
leftWidth.value = 900
} else if (initialWidth + x < 400) {
leftWidth.value = 400
} else {
leftWidth.value = initialWidth + x;
}
};
const endDrag = () => {
// 清理鼠标移动和松开事件监听器
window.removeEventListener('mousemove', whileDragging);
window.removeEventListener('mouseup', endDrag);
resizer = null;
};
//#endregion
</script>
<style lang="scss" scoped>
.drag-layout {
display: flex;
width: 100%;
height: 100%;
/* 根据需要调整高度 */
.right-panel {
flex-grow: 1;
}
.resizer {
width: 8px;
background-color: #ccc;
cursor: col-resize;
margin: 0 10px;
}
}
.menuTop {
margin-bottom: 20px;
}
.reality {
display: flex;
.reality-select {
flex: 1;
margin-right: 10px
}
}
</style>