vue3+ts 写一个拖拽生成组件功能

好的，我来为您提供一个示例代码。首先，需要安装 Vue.js 3 和 TypeScript 的依赖：

npm install vue@next vue-router@4.0.0-beta.8 vuex@4.0.0-beta.4 typescript@4.0.3

然后，我们可以创建一个拖拽生成组件功能的 Demo，具体代码如下所示：

<template>
  <div class="app">
    <div class="sidebar">
      <div class="draggable" v-for="(component, index) in components" :key="index" :data-id="index" draggable="true" @dragstart="dragStart">
        {{ component }}
      </div>
    </div>
    <div class="canvas" @drop="drop" @dragover.prevent>
      <component v-for="(component, index) in canvas" :key="index" :is="component"></component>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  data() {
    return {
      components: ['Input', 'Button', 'Image'],
      canvas: [],
    };
  },
  methods: {
    dragStart(event: DragEvent) {
      const target = event.target as HTMLElement;
      event.dataTransfer?.setData('text/plain', target.dataset.id || '');
    },
    drop(event: DragEvent) {
      const id = event.dataTransfer?.getData('text/plain');
      if (id) {
        const component = this.components[id];
        this.canvas.push(component);
      }
    },
  },
});
</script>

<style>
.app {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
  padding: 20px;
  background-color: #f5f5f5;
}

.draggable {
  margin-bottom: 10px;
  cursor: move;
}

.canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e0e0e0;
  height: 100%;
}
</style>

这个 Demo 中，我们在左侧创建了三个可拖拽的组件，分别是 Input、Button 和 Image，然后在右侧的画布中可以通过拖拽生成组件。当我们从左侧的组件拖动到右侧的画布中时，会触发 `drop` 方法，将组件添加到 `canvas` 数组中，然后在页面中渲染出来。

以上是一个简单的示例代码，您可以基于此扩展实现更复杂的拖拽生成组件功能。