在vue中盒子大小由两个控件来拖拽调整的代码，其中一个控件负责宽度，另一个负责高度

霜霜霜啊

已于 2023-04-24 09:54:02 修改

阅读量522

点赞数 1

文章标签： html 前端 javascript vue

于 2023-04-24 09:53:30 首次发布

本文链接：https://blog.csdn.net/l10103/article/details/130336073

版权

该组件使用Vue.js创建了一个可拖动调整宽度和高度的盒子。通过监听鼠标事件，动态改变盒子的width和height属性，实现尺寸控制功能。拖拽过程中，鼠标移动的距离被用来更新盒子的宽度或高度，提供了一种交互式的界面调整体验。

摘要由CSDN通过智能技术生成

<template>
  <div class="box" :style="{width: width + 'px', height: height + 'px'}">
    <!-- 宽度控件 -->
    <div class="width-control" :style="{left: width - 10 + 'px'}" @mousedown.prevent="startDragWidth"></div>
    <!-- 高度控件 -->
    <div class="height-control" :style="{top: height - 10 + 'px'}" @mousedown.prevent="startDragHeight"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 盒子宽度和高度
      width: 200,
      height: 200,
      // 拖拽相关参数
      isDraggingWidth: false,
      isDraggingHeight: false,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    startDragWidth(e) {
      this.isDraggingWidth = true;
      this.startX = e.clientX;
    },
    startDragHeight(e) {
      this.isDraggingHeight = true;
      this.startY = e.clientY;
    },
    endDrag() {
      this.isDraggingWidth = false;
      this.isDraggingHeight = false;
    },
    handleMouseMove(e) {
      if (this.isDraggingWidth) {
        const dx = e.clientX - this.startX;
        this.width += dx;
        this.startX = e.clientX;
      } else if (this.isDraggingHeight) {
        const dy = e.clientY - this.startY;
        this.height += dy;
        this.startY = e.clientY;
      }
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.handleMouseMove);
    document.addEventListener('mouseup', this.endDrag);
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('mouseup', this.endDrag);
  }
}
</script>

<style scoped>
.box {
  position: relative;
  border: 1px solid #ccc;
}
.width-control, .height-control {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f00;
  cursor: pointer;
}
.width-control {
  top: 50%;
  transform: translate(-50%, -50%);
}
.height-control {
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

这个组件中，我使用了两个 div 元素作为宽度和高度控件，并用样式将它们定位到了盒子的右边和底部。当鼠标按下时，我们通过 @mousedown.prevent="startDragWidth" 或 @mousedown.prevent="startDragHeight" 监听鼠标事件，并设置相应的拖拽状态。在拖拽过程中，我们监听 document 的 mousemove 事件，并根据鼠标移动的距离调整盒子的宽度或高度。最后，在鼠标松开时，我们重置拖拽状态。