vue3拖动改变元素宽度实现宽度自适应

在Vue 3中实现拖动改变元素宽度并实现宽度自适应的方法如下：

1. 首先，创建一个可拖动的元素，可以使用HTML的`<div>`标签，并给它一个固定的宽度。

2. 在Vue组件中，使用`@mousedown`事件监听鼠标按下的动作，并绑定一个方法来处理拖动事件。

3. 在这个方法中，使用`@mousemove`和`@mouseup`事件来监听鼠标移动和释放的动作，并绑定对应的方法来处理。

4. 在鼠标按下时，记录下鼠标的初始位置和元素的初始宽度。

5. 在鼠标移动时，计算鼠标移动的距离，并根据这个距离计算出新的元素宽度。

6. 更新元素的宽度，可以使用Vue的响应式数据或者直接操作DOM元素。

下面是一个示例代码：

<template>
  <div class="draggable" :style="{ width: width + 'px' }" @mousedown="startDragging">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startWidth: 0,
      width: 200, // 初始宽度
    };
  },
  methods: {
    startDragging(event) {
      this.startX = event.clientX;
      this.startWidth = this.width;

      document.addEventListener('mousemove', this.drag);
      document.addEventListener('mouseup', this.stopDragging);
    },
    drag(event) {
      const dx = event.clientX - this.startX;
      this.width = this.startWidth + dx;
    },
    stopDragging() {
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('mouseup', this.stopDragging);
    },
  },
};
</script>

<style scoped>
.draggable {
  border: 1px solid #ccc;
  cursor: col-resize;
}
</style>

这样，当你拖动可拖动元素时，它的宽度会随着鼠标的移动而改变，并实现宽度自适应效果。注意，在实际项目中，你可能需要根据需求对代码进行适当的修改和扩展。