Vue实现简易拖拽菜单栏

vue3环境

自己记录一下，希望对您有帮助

<template>  
  <div class="container">  
    <el-container>  
      <!-- 左侧菜单 -->
      <el-aside :width="`${width}px`">  
        <!-- 拖拽区域 -->
        <div class="resize" @mousedown="startDrag"></div>  
      </el-aside>  
      <el-main>Main</el-main>  
    </el-container>  
  </div>  
</template> 

<script setup>

// 菜单初始宽度
const width = ref(200);  

// 鼠标按下时的初始位置  
let startX = null;

// 标记是否正在拖动  
let isDragging = false;  

// 开始拖动  
const startDrag = (event) => {  

// 阻止默认行为和冒泡  
event.preventDefault();  
event.stopPropagation();  

// 记录鼠标按下时的 X 坐标  
startX = event.clientX;  

// 标记为正在拖动  
isDragging = true;  

// 监听鼠标移动事件  
document.addEventListener('mousemove', handleMouseMove);  

// 监听鼠标释放事件  
document.addEventListener('mouseup', stopDrag);  

};  

 
// 处理鼠标移动  
const handleMouseMove = (event) => {  
if (!isDragging || !startX) return;  

// 计算鼠标移动的距离  
const moveX = event.clientX - startX;  

// 更新侧边栏宽度，并限制在一定范围内（200~400）
const newWidth = Math.max(200, Math.min(400, width.value + moveX));  
width.value = newWidth;  

// 更新起始位置为当前位置，用于连续拖动  
startX = event.clientX;  

};  


// 停止拖动  
const stopDrag = () => {  

// 移除事件监听器  
document.removeEventListener('mousemove', handleMouseMove);  
document.removeEventListener('mouseup', stopDrag);  

// 标记为非拖动状态  
isDragging = false;  
startX = null;  

};  

// 组件卸载时移除事件监听器，防止内存泄漏  
onUnmounted(() => {  
 // 这里通常不需要手动移除事件监听器，因为组件卸载后 DOM 元素也会被销毁  
 // 但如果出于某种原因需要手动清理，可以这样做：  
 // document.removeEventListener('mousemove', handleMouseMove); // 注意：这通常不是必要的  
 // document.removeEventListener('mouseup', stopDrag); // 注意：这通常不是必要的  
}); 

</script>