Vue拖拽生成H5

Vue 拖拽生成 H5 可以借助第三方库来实现，比如 vue-draggable-resizable。这个库可以让用户通过拖拽和调整大小来创建和编辑 H5 页面。

具体实现步骤如下：

1. 安装 vue-draggable-resizable 库

npm install vue-draggable-resizable --save

2. 在组件中引入并注册该库

import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    VueDraggableResizable
  }
}

3. 在模板中使用 VueDraggableResizable 组件来实现拖拽和调整大小功能

<vue-draggable-resizable
  :w="200"
  :h="200"
  :x="100"
  :y="100"
  :min-w="100"
  :min-h="100"
  :active.sync="isActive"
  :parent="true"
  @resizing="onResizing"
  @dragging="onDragging"
>
  <div class="box">My H5</div>
</vue-draggable-resizable>

其中，`w`、`h`、`x`、`y` 分别代表组件的宽度、高度、横向和纵向位置；`min-w`、`min-h` 分别代表组件的最小宽度和高度；`active.sync` 用于控制组件是否处于活动状态；`parent` 用于控制组件是否可以超出其父容器。

同时，`@resizing` 和 `@dragging` 分别是在组件调整大小和拖拽时触发的事件，可以在这里实现一些自定义的逻辑。

通过以上步骤，即可实现 Vue 拖拽生成 H5 的功能。同时，vue-draggable-resizable 还提供了许多其他的配置选项和事件，可以根据具体需求进行使用。