Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）

Vue Grid Layout 是一个用于Vue.js的栅格布局系统，它允许用户创建和管理动态的布局。以下是如何使用Vue Grid Layout的简单步骤：

1. 安装Vue Grid Layout：

npm install vue-grid-layout

2. 在Vue组件中引入并注册Vue Grid Layout：

<template>
  <grid-layout
    :layout="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :vertical-compact="true"
    @move="log('move')"
    @resize="log('resize')"
  >
    <grid-item
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>
 
<script>
import { GridLayout, GridItem } from 'vue-grid-layout';
 
export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
        // ...
      ]
    };
  },
  methods: {
    log(event) {
      console.log(event);
    }
  }
};
</script>

在这个例子中，我们定义了一个layout数组来描述网格的初始布局状态，其中每个元素代表一个grid-item，包含其位置(x, y)、宽度(w)、高度(h)和标识(i)。GridLayout组件负责渲染布局，并处理用户的拖拽和缩放操作。

以上代码提供了Vue Grid Layout的基础使用方法，实际使用时可以根据项目需求调整布局参数和事件处理。