vue实现左右拖动分屏

在Vue中实现左右拖动分屏可以使用mouseup、mousedown和mousemove事件。以下是一个简单的例子：

<template>
  <div class="container" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="doDrag">
    <div class="left-pane" :style="{ width: leftPaneWidth + 'px' }">左侧内容</div>
    <div class="drag-bar" @mousedown.stop.prevent=""></div>
    <div class="right-pane">右侧内容</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dragging: false,
      leftPaneWidth: 200, // 初始宽度
      startX: 0,
    };
  },
  methods: {
    startDrag(event) {
      this.dragging = true;
      this.startX = event.clientX;
    },
    stopDrag() {
      this.dragging = false;
    },
    doDrag(event) {
      if (this.dragging) {
        const deltaX = event.clientX - this.startX;
        this.leftPaneWidth += deltaX;
        this.startX = event.clientX;
      }
    }
  }
};
</script>
 
<style scoped>
.container {
  display: flex;
  height: 400px;
}
.left-pane {
  background-color: #ddd;
  overflow: auto;
}
.drag-bar {
  width: 10px;
  background-color: #f0f0f0;
  cursor: col-resize;
  align-self: stretch;
  margin: 0 5px;
}
.right-pane {
  flex-grow: 1;
  background-color: #f3f3f3;
  overflow: auto;
}
</style>

在这个例子中，.container是包含左右分屏的容器，.left-pane是左侧可拖动调整宽度的面板，.drag-bar是拖动的手柄，.right-pane是右侧的面板。

在data中定义了dragging和leftPaneWidth来跟踪拖动状态和左侧面板的宽度。

startDrag方法在拖动开始时被调用，它设置dragging为true并记录起始X坐标。

stopDrag方法在拖动结束时被调用，它设置dragging为false。

doDrag方法在拖动过程中被调用，它计算拖动的距离并更新左侧面板的宽度。

注意，这个例子没有加入边界检查来确保左侧面板宽度不会小于最小值或者大于容器的剩余宽度。实际应用中可能需要加入这样的边界检查。