vue实现拖拽改变尺寸

实现拖拽改变尺寸的基本思路

在Vue中实现拖拽改变尺寸的功能，可以通过监听鼠标事件并结合CSS样式来实现。主要步骤包括设置可拖拽元素、监听鼠标按下事件、跟踪鼠标移动以及更新元素尺寸。

使用原生事件实现

创建一个可拖拽的调整手柄，通过鼠标事件来改变元素尺寸。

<template>
  <div class="resizable-container">
    <div class="resizable-element" :style="{ width: width + 'px', height: height + 'px' }">
      <div class="resize-handle" @mousedown="startResize"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 200,
      height: 200,
      isResizing: false,
      startX: 0,
      startY: 0,
      startWidth: 0,
      startHeight: 0
    };
  },
  methods: {
    startResize(e) {
      this.isResizing = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.startWidth = this.width;
      this.startHeight = this.height;
      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
    },
    resize(e) {
      if (!this.isResizing) return;
      this.width = this.startWidth + (e.clientX - this.startX);
      this.height = this.startHeight + (e.clientY - this.startY);
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
    }
  }
};
</script>

<style>
.resizable-container {
  position: relative;
}
.resizable-element {
  position: relative;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  overflow: hidden;
}
.resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: #666;
  cursor: se-resize;
}
</style>

使用第三方库实现

如果需要更复杂的拖拽调整功能，可以使用第三方库如vue-draggable-resizable。

安装库：

npm install vue-draggable-resizable

使用示例：

<template>
  <div>
    <VueDraggableResizable
      :w="200"
      :h="200"
      @resizing="onResize"
      @dragging="onDrag"
    >
      <p>可拖拽调整的元素</p>
    </VueDraggableResizable>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable';

export default {
  components: {
    VueDraggableResizable
  },
  methods: {
    onResize(x, y, width, height) {
      console.log('调整尺寸:', width, height);
    },
    onDrag(x, y) {
      console.log('拖拽位置:', x, y);
    }
  }
};
</script>

性能优化建议

对于频繁的尺寸调整操作，可以使用防抖或节流技术减少事件触发的频率。

import { debounce } from 'lodash';

methods: {
  resize: debounce(function(e) {
    if (!this.isResizing) return;
    this.width = this.startWidth + (e.clientX - this.startX);
    this.height = this.startHeight + (e.clientY - this.startY);
  }, 16)
}

注意事项

确保在组件销毁时移除事件监听，避免内存泄漏。

beforeDestroy() {
  document.removeEventListener('mousemove', this.resize);
  document.removeEventListener('mouseup', this.stopResize);
}