vue垂直布局_使用vue-grid-layout完成桌面拖拽布局功能

Vue-grid-layout 是一个基于 Vue.js 的响应式网格布局系统，可以帮助你轻松地实现桌面拖拽布局功能。下面是一个简单的例子：

1. 首先，你需要安装 vue-grid-layout：

npm install vue-grid-layout

2. 在 Vue 组件中引入 vue-grid-layout：

import VueGridLayout from 'vue-grid-layout';

3. 在 template 中使用 vue-grid-layout：

<vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
  <div v-for="item in layout" :key="item.i">{{ item.i }}</div>
</vue-grid-layout>

其中，`layout` 是一个数组，用于定义每个网格的位置和大小。`col-num` 定义了网格布局的列数，`row-height` 定义了每行网格的高度，`is-draggable` 和 `is-resizable` 分别表示是否可拖拽和可调整大小。

4. 在 JavaScript 中定义 `layout` 数组：

data() {
  return {
    layout: [
      { i: 'a', x: 0, y: 0, w: 1, h: 2 },
      { i: 'b', x: 1, y: 0, w: 3, h: 2 },
      { i: 'c', x: 4, y: 0, w: 1, h: 2 }
    ]
  };
}

其中，`i` 表示网格的 ID，`x` 和 `y` 表示网格的左上角坐标，`w` 和 `h` 表示网格的宽度和高度。

这样，你就可以实现一个简单的网格布局，并且可以拖拽和调整网格的大小。更多详细的用法可以参考 vue-grid-layout 的官方文档。