当前位置：首页 > VUE

vue实现div拉伸

2026-01-12 00:29:39VUE

Vue 实现 Div 拉伸

使用鼠标事件监听实现拖拽拉伸

在 Vue 中实现 Div 拉伸可以通过监听鼠标事件来动态调整 Div 的尺寸。以下是具体实现方法：

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

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

<style>
.resizable-div {
  position: relative;
  border: 1px solid #ccc;
}

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

使用第三方库 vue-resizable

对于更复杂的拉伸需求，可以使用 vue-resizable 库：

npm install vue-resizable

在组件中使用：

<template>
  <resizable
    :width="200"
    :height="200"
    :min-width="100"
    :min-height="100"
    @resize:end="onResizeEnd"
  >
    <div class="content">可拉伸内容</div>
  </resizable>
</template>

<script>
import { Resizable } from 'vue-resizable'

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

实现四边拉伸功能

如果需要实现四边都能拉伸的效果，可以扩展第一种方法：

<template>
  <div class="resizable-box" :style="boxStyle">
    <div class="resizer top" @mousedown="startResize('top')"></div>
    <div class="resizer right" @mousedown="startResize('right')"></div>
    <div class="resizer bottom" @mousedown="startResize('bottom')"></div>
    <div class="resizer left" @mousedown="startResize('left')"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 300,
      height: 200,
      resizing: null,
      startX: 0,
      startY: 0,
      startWidth: 0,
      startHeight: 0
    }
  },
  computed: {
    boxStyle() {
      return {
        width: `${this.width}px`,
        height: `${this.height}px`
      }
    }
  },
  methods: {
    startResize(direction, e) {
      this.resizing = direction
      this.startX = e.clientX
      this.startY = e.clientY
      this.startWidth = this.width
      this.startHeight = this.height

      document.addEventListener('mousemove', this.doResize)
      document.addEventListener('mouseup', this.stopResize)
    },
    doResize(e) {
      if (!this.resizing) return

      const dx = e.clientX - this.startX
      const dy = e.clientY - this.startY

      switch(this.resizing) {
        case 'right':
          this.width = this.startWidth + dx
          break
        case 'bottom':
          this.height = this.startHeight + dy
          break
        case 'left':
          this.width = this.startWidth - dx
          break
        case 'top':
          this.height = this.startHeight - dy
          break
      }
    },
    stopResize() {
      this.resizing = null
      document.removeEventListener('mousemove', this.doResize)
      document.removeEventListener('mouseup', this.stopResize)
    }
  }
}
</script>

<style>
.resizable-box {
  position: relative;
  border: 1px solid #000;
}

.resizer {
  position: absolute;
  background: #000;
}

.resizer.top {
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: n-resize;
}

.resizer.right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 5px;
  cursor: e-resize;
}

.resizer.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: s-resize;
}

.resizer.left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  cursor: w-resize;
}
</style>