Vue Grid Layout -️ 适用Vue.js的栅格布局系统，在vue3+上使用

Vue Grid Layout 是一个用于Vue.js的栅格布局系统，它允许用户创建和管理动态的布局。在Vue 3+中使用Vue Grid Layout时，你需要按照以下步骤操作：

1. 安装Vue Grid Layout：

npm install vue-grid-layout

2. 在你的Vue 3项目中引入并使用Vue Grid Layout：

import Vue from 'vue'
import VueGridLayout from 'vue-grid-layout'
 
Vue.use(VueGridLayout)

3. 在你的组件中定义布局并使用<grid-layout>和<grid-item>组件：

<template>
  <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
    <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>
 
<script>
export default {
  data() {
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
        {"x":2,"y":0,"w":2,"h":4,"i":"1"},
        {"x":4,"y":0,"w":2,"h":5,"i":"2"},
        // ...
      ]
    };
  }
}
</script>

在上面的例子中，layout数组定义了布局系统中各个网格项的位置、宽度、高度和标识。<grid-layout>组件负责渲染布局，并允许用户拖拽和调整大小。<grid-item>组件用于定义单个网格项的内容。

请注意，Vue Grid Layout库随着Vue版本的更新而可能有不同的API变化，因此，请参考最新的官方文档以获取最准确的信息。