vue-grid-layout vue3

根据提供的引用内容，Vue3中使用vue-grid-layout的步骤如下：

1. 首先，安装vue-grid-layout依赖包。可以使用npm或yarn进行安装，具体命令如下：

   npm install vue-grid-layout
   或
   yarn add vue-grid-layout

2. 在Vue组件中引入vue-grid-layout，并注册组件。具体代码如下：

   import { GridLayout, GridItem } from 'vue-grid-layout';
   
   export default {
     components: {
       GridLayout,
       GridItem,
     },
     // ...
   }

3. 在Vue组件中使用GridLayout和GridItem组件。GridLayout组件用于创建网格布局，GridItem组件用于创建网格中的小部件。具体代码如下：

   <template>
     <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :vertical-compact="false" :margin="[10, 10]" :use-css-transforms="true">
       <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h">
         <div :style="{ backgroundColor: item.color }">{{ item.i }}</div>
       </grid-item>
     </grid-layout>
   </template>

在上面的代码中，我们使用了GridLayout和GridItem组件来创建一个网格布局，并在其中添加了一些小部件。其中，layout属性用于指定网格布局的初始状态，col-num属性用于指定网格的列数，row-height属性用于指定网格的行高，is-draggable属性用于指定小部件是否可拖动，is-resizable属性用于指定小部件是否可调整大小，vertical-compact属性用于指定是否在垂直方向上紧凑排列小部件，margin属性用于指定小部件之间的间距，use-css-transforms属性用于指定是否使用CSS变换来移动和调整大小小部件。

4. 最后，我们需要在Vue组件中定义layout属性，用于指定网格布局的初始状态。具体代码如下：

   export default {
     data() {
       return {
         layout: [
           { i: '1', x: 0, y: 0, w: 2, h: 2, color: 'red' },
           { i: '2', x: 2, y: 0, w: 2, h: 4, color: 'green' },
           { i: '3', x: 4, y: 0, w: 2, h: 5, color: 'blue' },
         ],
       };
     },
     // ...
   }

在上面的代码中，我们定义了一个layout数组，用于指定网格布局的初始状态。其中，每个元素都代表一个小部件，包含i、x、y、w、h和color属性。i属性用于指定小部件的唯一标识符，x和y属性用于指定小部件的位置，w和h属性用于指定小部件的宽度和高度，color属性用于指定小部件的背景颜色。