vue实现拖拽边框改变元素宽度

你可以通过在元素上使用 `v-on:mousemove` 监听鼠标移动事件，并在事件处理程序中计算元素的宽度来实现拖拽边框改变元素宽度。下面是一个伪代码示例：

<template>
  <div class="resizeable-container">
    <div class="resizeable-element"
          :style="{ width: elementWidth + 'px' }"
          @mousemove="handleMouseMove"
          @mouseup="handleMouseUp">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elementWidth: 200,
      isDragging: false,
      startX: 0
    };
  },
  
  methods: {
    handleMouseMove(event) {
      if (this.isDragging) {
        const mouseX = event.clientX;
        const deltaX = mouseX - this.startX;
        const newWidth = this.elementWidth + deltaX;
        this.elementWidth = newWidth < 0 ? 0 : newWidth; // 防止元素宽度小于 0
        this.startX = mouseX;
      }
    },
    
    handleMouseDown(event) {
      this.isDragging = true;
      this.startX = event.clientX;
    },
    
    handleMouseUp() {
      this.isDragging = false;
    }
  }
};
</script>

在这个示例中，我们使用 `v-on:mousemove` 监听鼠标移动事件，当拖拽开始时调用 `handleMouseDown()` 方法设置 `isDragging` 属性为 `true`，并记录鼠标的初始位置，当鼠标移动时，调用 `handleMouseMove()` 方法来计算元素的宽度并更新 `elementWidth` 属性。最后当拖拽结束时调用 `handleMouseUp()` 方法来将 `isDragging` 属性设置为 `false`。