vue3实现组件点击拖拽改变宽度

在 Vue3 中实现组件的点击拖拽改变宽度，我们可以借助一些现成的第三方库，如 `vue-draggable`。以下是简单的步骤：

1. 安装依赖：首先需要安装 `vue-draggable`，你可以使用npm或yarn来安装：

   npm install vue-draggable
   # 或者
   yarn add vue-draggable

2. 引入并配置组件：在你的组件中引入并配置 `vue-draggable` 组件，例如：

   <template>
     <draggable
       :list="items"
       :options="{ dragging: isDragging, group: 'group'}"
       @start="handleStart"
       @end="handleEnd"
     >
       <div v-for="(item, index) in items" :key="index" :style="{ width: item.width + 'px' }">
         {{ item.text }}
         <span @mousedown="dragStart(index)" style="cursor: grab;">&nbsp;</span>
       </div>
     </draggable>
   </template>

3. 编写数据和方法：

   <script>
   import draggable from 'vue-draggable';

   export default {
     components: {
       draggable,
     },
     data() {
       return {
         items: [
           { text: 'Item 1', width: 100 },
           // ... 其他项
         ],
         isDragging: false,
       };
     },
     methods: {
       dragStart(index) {
         this.isDragging = true;
         this.handleDragStart(index);
       },
       handleStart(event, index) {
         this.$set(this.items, index, { ...this.items[index], width: null });
         event.dataTransfer.setData('index', index);
       },
       handleEnd(event, index) {
         this.isDragging = false;
         const draggedItem = this.items[index];
         this.handleDragged(draggedItem, index);
         event.preventDefault();
       },
       handleDragged(item, index) {
         // 更新实际宽度和视图
         this.items[index].width = event.clientX - this.$el.getBoundingClientRect().left;
         this.$forceUpdate();
       },
     },
   };
   </script>

4. 拖动开始和结束时的回调函数负责处理拖拽过程中的细节和更新状态。

注意这只是一个基础示例，实际应用可能还需要考虑边界限制、拖拽方向控制等问题。如果你对动画有特殊需求，还可以配合 CSS3 动画进行优化。