vue拖拽组件生成页面

要实现Vue拖拽组件生成页面，可以使用以下步骤：

1. 创建一个拖拽组件，该组件可以被拖动到页面上。

2. 创建一个页面容器组件，该组件可以接收拖拽组件并将其放置在页面上。

3. 在拖拽组件上添加拖拽事件，当拖拽开始时，将该组件的类型和位置信息传递给页面容器组件。

4. 页面容器组件接收到拖拽组件信息后，根据组件类型创建对应的组件实例，并将其添加到容器中。

5. 在页面容器组件中，可以添加一些逻辑处理，例如组件排序、删除等操作。

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

<template>
  <div class="container" @dragover.prevent @drop="handleDrop">
    <component v-for="(comp, index) in components" :key="index" :is="comp.type"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: []
    }
  },
  methods: {
    handleDrop(e) {
      const type = e.dataTransfer.getData('type')
      const left = e.clientX
      const top = e.clientY
      this.components.push({ type, left, top })
    }
  }
}
</script>

在上面的代码中，我们创建了一个页面容器组件，该组件包含一个拖拽事件和一个放置事件。在放置事件处理函数中，我们获取拖拽组件的类型和位置信息，并将其添加到容器中。注意，我们使用了Vue的动态组件，根据组件类型创建对应的组件实例。

在拖拽组件中，我们需要添加拖拽事件，将组件类型和位置信息传递给页面容器组件。示例代码如下：

<template>
  <div class="drag" draggable @dragstart="handleDragStart"></div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('type', 'componentType')
      e.dataTransfer.setData('left', e.clientX)
      e.dataTransfer.setData('top', e.clientY)
    }
  }
}
</script>

在上面的代码中，我们添加了一个拖拽事件，并在事件处理函数中使用`dataTransfer`对象传递组件类型和位置信息。

以上就是Vue拖拽组件生成页面的简单实现方法。