vue3怎么多次拖拽clone的组件

在Vue3中，你可以使用`<template v-for>`指令来实现多次拖拽克隆组件的功能。

首先，你需要在组件的拖拽事件中获取到被拖拽的组件信息，然后在`drop`事件中将其克隆并添加到目标位置。在添加克隆组件时，你需要给它一个唯一的`key`属性，以便Vue能够正确地渲染它们。

下面是一个简单的示例代码：

<template>
  <div class="container"
       @dragover.prevent
       @drop="dropHandler">
    <template v-for="(item, index) in items" :key="item.id">
      <div class="item"
           :draggable="true"
           @dragstart="dragStartHandler(item)">
        {{ item.text }}
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  },
  methods: {
    dragStartHandler(item) {
      // 在拖拽事件中保存被拖拽的组件信息
      this.draggedItem = item;
    },
    dropHandler(event) {
      // 克隆被拖拽的组件并添加到目标位置
      const newItem = { ...this.draggedItem, id: new Date().getTime() };
      this.items.push(newItem);
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  border: 2px dashed #ccc;
  padding: 10px;
}

.item {
  width: 100px;
  height: 50px;
  background-color: #eee;
  margin: 10px;
  text-align: center;
  line-height: 50px;
  cursor: move;
}
</style>

在这个示例中，我们使用了`<template v-for>`指令来循环渲染组件，并在`dragstart`事件中保存被拖拽的组件信息。在`drop`事件中，我们克隆被拖拽的组件并添加到目标位置。

你可以根据需求自定义样式和事件处理程序来实现更丰富的拖拽克隆组件功能。