当前位置：首页 > VUE

vue拖拽实现宽度改变

2026-02-23 11:03:42VUE

实现拖拽调整宽度的基本思路

在Vue中实现拖拽调整宽度，核心是通过监听鼠标事件（mousedown、mousemove、mouseup）来动态计算并更新目标元素的宽度。需要结合Vue的响应式特性和DOM操作。

组件结构与模板

创建一个可拖拽调整宽度的组件，模板部分包含拖拽手柄和目标元素：

<template>
  <div class="resizable-container">
    <div 
      class="resizable-element" 
      :style="{ width: elementWidth + 'px' }"
    >
      可调整宽度的元素
    </div>
    <div 
      class="drag-handle" 
      @mousedown="startDrag"
    ></div>
  </div>
</template>

数据与样式定义

定义组件数据与基础样式：

<script>
export default {
  data() {
    return {
      elementWidth: 200,
      isDragging: false,
      startX: 0,
      startWidth: 0
    }
  }
}
</script>

<style>
.resizable-container {
  display: flex;
  align-items: center;
}

.resizable-element {
  background: #f0f0f0;
  height: 100px;
  border: 1px solid #ccc;
}

.drag-handle {
  width: 10px;
  height: 100px;
  background: #ddd;
  cursor: col-resize;
}
</style>

拖拽逻辑实现

实现鼠标事件处理函数：

methods: {
  startDrag(e) {
    this.isDragging = true
    this.startX = e.clientX
    this.startWidth = this.elementWidth

    document.addEventListener('mousemove', this.handleDrag)
    document.addEventListener('mouseup', this.stopDrag)
  },

  handleDrag(e) {
    if (!this.isDragging) return
    const deltaX = e.clientX - this.startX
    this.elementWidth = this.startWidth + deltaX
  },

  stopDrag() {
    this.isDragging = false
    document.removeEventListener('mousemove', this.handleDrag)
    document.removeEventListener('mouseup', this.stopDrag)
  }
}

边界处理与优化

添加宽度限制和性能优化：

vue拖拽实现宽度改变

handleDrag(e) {
  if (!this.isDragging) return
  const deltaX = e.clientX - this.startX
  const newWidth = this.startWidth + deltaX

  // 设置最小和最大宽度限制
  this.elementWidth = Math.max(100, Math.min(500, newWidth))
}

使用指令实现复用

可以封装为自定义指令实现复用：

Vue.directive('resizable', {
  bind(el, binding) {
    const handle = document.createElement('div')
    handle.className = 'resize-handle'

    let startX, startWidth

    handle.addEventListener('mousedown', (e) => {
      startX = e.clientX
      startWidth = el.offsetWidth

      document.addEventListener('mousemove', resize)
      document.addEventListener('mouseup', stopResize)
    })

    function resize(e) {
      const newWidth = startWidth + (e.clientX - startX)
      el.style.width = `${newWidth}px`
    }

    function stopResize() {
      document.removeEventListener('mousemove', resize)
    }

    el.appendChild(handle)
  }
})

第三方库方案

使用现成的拖拽库如vue-draggable或interact.js：

import interact from 'interactjs'

export default {
  mounted() {
    interact('.resizable-element')
      .resizable({
        edges: { right: true },
        listeners: {
          move: (event) => {
            this.elementWidth = event.rect.width
          }
        }
      })
  }
}