首页 技术设计 前端 vue

为了在 Vue 2 中实现一个组件，其中包含左右两个表格，且中间有一个可拖拽的区域来动态调整表格的宽度，你可以按照以下步骤进行：

# 1. 创建 Vue 组件

首先，创建一个新的 Vue 组件，用于包裹两个表格和中间的拖拽区域。

<template>
  <div class="container">
    <div class="left-table" :style="{ width: leftWidth + 'px' }">
      <table>
        <!-- 左侧表格内容 -->
      </table>
    </div>
    <div class="resizer" @mousedown="startDrag"></div>
    <div class="right-table" :style="{ width: rightWidth + 'px' }">
      <table>
        <!-- 右侧表格内容 -->
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      containerWidth: 800, // 容器的总宽度
      leftWidth: 400, // 左侧表格的初始宽度
      rightWidth: 400, // 右侧表格的初始宽度
      dragging: false, // 是否正在拖拽
      startX: 0, // 拖拽开始时的鼠标位置
      startLeftWidth: 0, // 拖拽开始时的左侧表格宽度
    };
  },
  methods: {
    startDrag(e) {
      this.dragging = true;
      this.startX = e.clientX;
      this.startLeftWidth = this.leftWidth;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.endDrag);
    },
    onDrag(e) {
      if (!this.dragging) return;
      const delta = e.clientX - this.startX;
      this.leftWidth = this.startLeftWidth + delta;
      this.rightWidth = this.containerWidth - this.leftWidth;
    },
    endDrag() {
      this.dragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.endDrag);
      // 在这里可以进行宽度的持久化或状态管理
    },
  },
  mounted() {
    this.leftWidth = this.containerWidth / 2;
    this.rightWidth = this.containerWidth / 2;
  },
};
</script>
<style scoped>
.container {
  display: flex;
  height: 100%;
}
.left-table, .right-table {
  overflow: auto;
  border: 1px solid #ccc;
}
.resizer {
  cursor: col-resize;
  width: 5px;
  background: #ccc;
  user-select: none;
}
</style>
# 2. 实现拖拽功能
在组件的模板中，我们添加了一个 .resizer 元素作为拖拽区域，并为其绑定了 mousedown 事件。当用户点击并拖动这个区域时，会触发 startDrag 方法。
在 startDrag 方法中，我们记录了拖拽开始时的鼠标位置和左侧表格的宽度，并添加了 mousemove 和 mouseup 事件监听器，以处理拖拽过程中的移动和结束。
onDrag 方法根据鼠标的移动距离动态调整左右表格的宽度。
endDrag 方法用于在拖拽结束时移除事件监听器，并可以在这里添加宽度的持久化或状态管理逻辑。
# 3. 样式和布局
使用 CSS Flexbox 布局来管理左右表格和拖拽区域的布局。通过设置 .container 的 display: flex; 属性，我们可以轻松地将元素水平排列。
.resizer 元素使用了一个较小的宽度和特定的背景颜色来指示可拖拽区域，并设置了 cursor: col-resize; 来改变鼠标指针样式，提供更直观的拖拽体验。
# 4. 持久化和状态管理
在 endDrag 方法中，你可以添加逻辑来将调整后的宽度保存到本地存储或发送到服务器，以便在页面刷新或重新加载时恢复用户设定的宽度。这可以通过使用 localStorage 或发送 HTTP 请求来实现。
# 5. 优化用户体验
确保拖拽时的流畅性，可以通过限制拖拽的最小和最大宽度，以及添加适当的动画效果来增强用户体验。此外，你还可以在拖拽过程中添加视觉反馈，如改变 .resizer 元素的样式或显示当前的宽度值。
通过以上步骤，你可以在 Vue 2 中实现一个包含左右两个表格且中间可拖拽分配大小的组件。