当前位置：首页 > VUE

vue实现拉伸

2026-01-08 03:37:26VUE

Vue 实现元素拉伸功能

在Vue中实现元素的拉伸（拖拽调整大小）功能，可以通过监听鼠标事件结合CSS样式来实现。以下是两种常见实现方式：

使用原生事件监听

创建可拉伸的组件需要处理鼠标按下、移动和释放事件。以下是一个基础实现示例：

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

<script>
export default {
  data() {
    return {
      isResizing: false
    }
  },
  methods: {
    startResize(e) {
      this.isResizing = true
      document.addEventListener('mousemove', this.resize)
      document.addEventListener('mouseup', this.stopResize)
    },
    resize(e) {
      if (!this.isResizing) return
      this.$refs.box.style.width = `${e.clientX - this.$refs.box.getBoundingClientRect().left}px`
      this.$refs.box.style.height = `${e.clientY - this.$refs.box.getBoundingClientRect().top}px`
    },
    stopResize() {
      this.isResizing = false
      document.removeEventListener('mousemove', this.resize)
      document.removeEventListener('mouseup', this.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: #000;
  cursor: se-resize;
}
</style>

使用第三方库

对于更复杂的拉伸需求，可以使用专门的Vue拖拽库：

vue-draggable-resizable：
```
npm install vue-draggable-resizable
```

<template>
  <div>
    <vue-draggable-resizable
      :w="200"
      :h="200"
      @resizing="onResize"
    >
      <p>可拉伸内容</p>
    </vue-draggable-resizable>
  </div>
</template>

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

export default {
  components: { VueDraggableResizable },
  methods: {
    onResize(x, y, width, height) {
      console.log('新尺寸:', width, height)
    }
  }
}
</script>

interact.js集成： Interact.js是一个强大的拖拽库，可以更灵活地实现拉伸功能：

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`
      })
  }
}