当前位置：首页 > VUE

vue实现拖拽改变尺寸

2026-01-12 03:15:35VUE

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

使用原生 HTML5 拖拽 API

通过监听 mousedown、mousemove 和 mouseup 事件实现拖拽改变尺寸。创建一个可拖拽的边界元素，调整目标元素的宽度或高度。

<template>
  <div class="resizable">
    <div class="content">可调整大小的内容</div>
    <div class="resizer" @mousedown="startResize"></div>
  </div>
</template>

<script>
export default {
  methods: {
    startResize(e) {
      window.addEventListener('mousemove', this.resize);
      window.addEventListener('mouseup', this.stopResize);
    },
    resize(e) {
      const resizable = document.querySelector('.resizable');
      resizable.style.width = e.clientX - resizable.getBoundingClientRect().left + 'px';
    },
    stopResize() {
      window.removeEventListener('mousemove', this.resize);
      window.removeEventListener('mouseup', this.stopResize);
    }
  }
};
</script>

<style>
.resizable {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  background-color: #ddd;
}
</style>

使用第三方库 `vue-resizable`

vue-resizable 是一个专门为 Vue 设计的拖拽调整尺寸的库，提供更简单的 API 和更多功能。

安装依赖：

npm install vue-resizable

使用示例：

<template>
  <vue-resizable :active="['r']" :width="200" :height="200" @resize:end="onResizeEnd">
    <div class="content">可调整大小的内容</div>
  </vue-resizable>
</template>

<script>
import VueResizable from 'vue-resizable';

export default {
  components: { VueResizable },
  methods: {
    onResizeEnd(size) {
      console.log('新尺寸:', size);
    }
  }
};
</script>

使用 `interact.js`

interact.js 是一个强大的拖拽库，支持调整尺寸、拖拽和手势操作。

安装依赖：

npm install interactjs

使用示例：

<template>
  <div ref="resizable" class="resizable">
    <div class="content">可调整大小的内容</div>
  </div>
</template>

<script>
import interact from 'interactjs';

export default {
  mounted() {
    interact(this.$refs.resizable)
      .resizable({
        edges: { right: true, bottom: true }
      })
      .on('resizemove', (event) => {
        const target = event.target;
        target.style.width = event.rect.width + 'px';
        target.style.height = event.rect.height + 'px';
      });
  }
};
</script>

<style>
.resizable {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>

使用 Vue 指令封装拖拽逻辑

通过自定义指令封装拖拽逻辑，实现可复用的拖拽调整尺寸功能。

<template>
  <div v-resizable:right class="resizable">
    <div class="content">可调整大小的内容</div>
  </div>
</template>

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

        resizer.addEventListener('mousedown', (e) => {
          e.preventDefault();
          const startX = e.clientX;
          const startWidth = el.offsetWidth;

          const doResize = (e) => {
            el.style.width = startWidth + (e.clientX - startX) + 'px';
          };

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

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

<style>
.resizable {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  background-color: #ddd;
}
</style>