vue实现 左侧模板,拖拽后生成实例化的数据

Vue可以通过使用拖拽库来实现左侧模板拖拽生成实例化的数据。下面是一个简单的实现过程：

首先，我们需要安装并引入一个拖拽库，比如使用vue-draggable。

npm install vuedraggable --save

然后在Vue组件中引入库，并创建一个data属性用于保存模板数据和生成的实例化数据。

import draggable from 'vuedraggable';

export default {
  name: 'DraggableTemplate',
  components: {
    draggable
  },
  data() {
    return {
      templates: [
        { id: 1, name: '模板1' },
        { id: 2, name: '模板2' },
        { id: 3, name: '模板3' },
      ],
      instances: [],
    };
  },
  methods: {
    onDrop(event) {
      const templateId = event.draggedContext.element.id;
      const templateName = event.draggedContext.element.name;
      this.instances.push({ id: templateId, name: templateName });
    },
  },
};

在模板中，我们使用v-for循环来展示左侧的模板列表，并使用draggable组件绑定onDrop方法来实现拖拽功能。

<template>
  <div>
    <div class="templates">
      <draggable
        v-model="templates"
        :options="{ group: 'templates' }"
        class="template-list"
      >
        <div v-for="template in templates" :key="template.id">
          {{ template.name }}
        </div>
      </draggable>
    </div>
    <div class="instances">
      <draggable
        v-model="instances"
        :options="{ group: 'instances' }"
        @drop="onDrop"
        class="instance-list"
      >
        <div v-for="instance in instances" :key="instance.id">
          {{ instance.name }}
        </div>
      </draggable>
    </div>
  </div>
</template>

这样，当我们在左侧模板列表中拖拽一个模板到右侧的实例列表中时，相应的模板数据会实例化并在实例列表中显示出来。

以上就是使用Vue实现左侧模板拖拽生成实例化的数据的简单过程。当然，具体的实现方式可以根据实际需求进行调整和扩展。