vue3 使用vue-grid-layout

vue-grid-layout 是一个用于 Vue.js 的可拖拽和可调整大小的网格布局组件。它可以帮助我们在页面上创建灵活的网格布局。

要在 Vue 3 中使用 vue-grid-layout，首先需要安装和引入它。

1. 安装 vue-grid-layout：

npm install vue-grid-layout

2. 在需要使用 vue-grid-layout 的组件中，引入并注册它：

import { GridLayout, GridItem } from 'vue-grid-layout';

export default {
  components: {
    GridLayout,
    GridItem,
  },
  // ...
}

3. 在模板中使用 vue-grid-layout：

<template>
  <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
    <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h">
      <!-- 这里放置具体的内容 -->
    </grid-item>
  </grid-layout>
</template>

上面的示例代码中，`:layout` 属性绑定了一个数组，用来定义网格布局的初始配置。`:col-num` 属性指定网格的列数，`:row-height` 属性指定每行的高度。`:is-draggable` 和 `:is-resizable` 属性分别控制是否可拖拽和调整大小。