vue3使用vue-grid-layout

Vue3 中使用 vue-grid-layout 的步骤如下：

1. 安装 vue-grid-layout

可以使用 npm 或 yarn 安装 vue-grid-layout：

npm install vue-grid-layout

yarn add vue-grid-layout

2. 导入 vue-grid-layout

在需要使用 vue-grid-layout 的组件中导入 vue-grid-layout：

import VueGridLayout from 'vue-grid-layout';

3. 注册 vue-grid-layout 组件

在组件中注册 vue-grid-layout 组件：

export default {
  components: { VueGridLayout },
  // ...
}

4. 使用 vue-grid-layout

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

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

<script>
import VueGridLayout from 'vue-grid-layout';

export default {
  components: { VueGridLayout },
  data() {
    return {
      layout: [
        { i: 'a', x: 0, y: 0, w: 3, h: 2 },
        { i: 'b', x: 3, y: 0, w: 6, h: 2 },
        { i: 'c', x: 9, y: 0, w: 3, h: 4 },
        { i: 'd', x: 0, y: 2, w: 6, h: 2 },
        { i: 'e', x: 6, y: 2, w: 6, h: 2 },
        { i: 'f', x: 0, y: 4, w: 12, h: 2 }
      ]
    };
  }
};
</script>

以上就是在 Vue3 中使用 vue-grid-layout 的基本步骤，你可以根据自己的需求进行调整。