vue-grid-layout组件使用

Vue-grid-layout是一个基于Vue.js的可拖拽和可调整大小的网格布局组件。它可以帮助开发者快速构建响应式的网格布局，支持多种布局方式和自定义样式。

使用Vue-grid-layout组件，需要先安装依赖包：

npm install vue-grid-layout --save

然后在Vue组件中引入：

import VueGridLayout from 'vue-grid-layout'

export default {
  components: {
    VueGridLayout
  },
  data() {
    return {
      layout: [
        {x: 0, y: 0, w: 2, h: 2, i: '1'},
        {x: 2, y: 0, w: 2, h: 4, i: '2'},
        {x: 4, y: 0, w: 2, h: 5, i: '3'}
      ]
    }
  }
}

在模板中使用VueGridLayout组件：

<template>
  <vue-grid-layout :layout="layout" :col-num="6" :row-height="100">
    <div v-for="item in layout" :key="item.i">{{ item.i }}</div>
  </vue-grid-layout>
</template>

其中，layout属性是一个数组，用于定义每个网格的位置和大小；col-num属性是网格的列数；row-height属性是每行网格的高度。

在模板中，可以使用v-for指令遍历layout数组，动态生成网格元素。

Vue-grid-layout组件还支持多种事件和方法，可以根据需要进行自定义配置和扩展。