当前位置：首页 > VUE

vue实现侧边栏拖动

2026-02-21 17:45:21VUE

实现侧边栏拖动的核心思路

通过监听鼠标事件（mousedown、mousemove、mouseup）计算拖动距离，动态调整侧边栏宽度。需结合 Vue 的响应式数据管理和样式绑定。

基础代码结构

<template>
  <div class="container">
    <div 
      class="sidebar" 
      :style="{ width: sidebarWidth + 'px' }"
    >
      <!-- 侧边栏内容 -->
    </div>
    <div 
      class="drag-handle" 
      @mousedown="startDrag"
    ></div>
    <div class="main-content">
      <!-- 主内容区 -->
    </div>
  </div>
</template>

实现拖动逻辑

<script>
export default {
  data() {
    return {
      sidebarWidth: 200,
      isDragging: false,
      startX: 0,
      startWidth: 0
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX;
      this.startWidth = this.sidebarWidth;
      document.addEventListener('mousemove', this.handleDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    handleDrag(e) {
      if (!this.isDragging) return;
      const deltaX = e.clientX - this.startX;
      this.sidebarWidth = Math.max(100, this.startWidth + deltaX); // 限制最小宽度
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.handleDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
}
</script>

样式关键点

<style>
.container {
  display: flex;
  height: 100vh;
}
.sidebar {
  background: #f0f0f0;
  transition: width 0.2s; /* 可选：添加动画效果 */
}
.drag-handle {
  width: 5px;
  background: #ddd;
  cursor: col-resize;
}
.drag-handle:hover {
  background: #ccc;
}
.main-content {
  flex: 1;
}
</style>

优化方向

边界处理：增加最大宽度限制 Math.min(newWidth, 500)
触摸屏支持：添加 touchstart、touchmove 事件处理
持久化：通过 localStorage 保存用户调整后的宽度
性能优化：使用 requestAnimationFrame 替代直接事件处理

完整示例扩展

// 持久化存储
mounted() {
  const savedWidth = localStorage.getItem('sidebarWidth');
  if (savedWidth) this.sidebarWidth = parseInt(savedWidth);
},
watch: {
  sidebarWidth(newVal) {
    localStorage.setItem('sidebarWidth', newVal);
  }
}

通过组合这些方法，可以实现一个可拖动、可记忆用户设置的侧边栏组件。实际应用中可根据需求调整细节参数。

vue实现侧边栏拖动