当前位置：首页 > VUE

vue实现拖拽改变尺寸

2026-02-25 21:20:45VUE

Vue 实现拖拽改变尺寸的方法

使用 Vue 实现拖拽改变尺寸可以通过多种方式完成，以下是几种常见的方法：

使用原生拖拽事件

通过监听 mousedown、mousemove 和 mouseup 事件实现拖拽功能。这种方式灵活性强，适合自定义需求。

<template>
  <div class="resizable-box" ref="resizableBox">
    <div class="resizer" @mousedown="startResize"></div>
  </div>
</template>

<script>
export default {
  methods: {
    startResize(e) {
      const box = this.$refs.resizableBox;
      const startX = e.clientX;
      const startWidth = box.offsetWidth;

      const doResize = (e) => {
        const newWidth = startWidth + (e.clientX - startX);
        box.style.width = `${newWidth}px`;
      };

      const stopResize = () => {
        document.removeEventListener('mousemove', doResize);
        document.removeEventListener('mouseup', stopResize);
      };

      document.addEventListener('mousemove', doResize);
      document.addEventListener('mouseup', stopResize);
    }
  }
};
</script>

<style>
.resizable-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

.resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: #333;
  cursor: se-resize;
}
</style>

使用第三方库

Vue Draggable Resizable 是一个专门为 Vue 设计的拖拽和调整尺寸的库，功能强大且易于使用。

安装库：

npm install vue-draggable-resizable

使用示例：

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

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

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

结合 Vue 指令

自定义 Vue 指令可以简化拖拽功能的实现，适用于需要复用的场景。

<template>
  <div v-resizable class="resizable-box"></div>
</template>

<script>
export default {
  directives: {
    resizable: {
      bind(el) {
        const resizer = document.createElement('div');
        resizer.className = 'resizer';
        el.appendChild(resizer);

        resizer.addEventListener('mousedown', initResize);

        function initResize(e) {
          const startX = e.clientX;
          const startWidth = el.offsetWidth;

          function doResize(e) {
            el.style.width = `${startWidth + (e.clientX - startX)}px`;
          }

          function stopResize() {
            document.removeEventListener('mousemove', doResize);
            document.removeEventListener('mouseup', stopResize);
          }

          document.addEventListener('mousemove', doResize);
          document.addEventListener('mouseup', stopResize);
        }
      }
    }
  }
};
</script>