vue-grid-layout 代码示例

vue-grid-layout是一个基于Vue.js的可拖拽网格布局组件，它可以帮助你轻松地创建可拖拽和可调整大小的网格布局。下面是一个简单的代码示例：

首先，你需要安装vue-grid-layout依赖：

npm install vue-grid-layout

然后，在你的Vue组件中引入并使用vue-grid-layout：

<template>
  <div>
    <vue-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"
    >
      <div v-for="item in layout" :key="item.i" :data-grid="item">
        {{ item.i }}
      </div>
    </vue-grid-layout>
  </div>
</template>

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

export default {
  components: {
    VueGridLayout,
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '1' },
        { x: 2, y: 0, w: 4, h: 2, i: '2' },
        { x: 6, y: 0, w: 2, h: 4, i: '3' },
      ],
    };
  },
};
</script>

在上面的示例中，我们首先引入了vue-grid-layout组件，并在Vue组件中注册了它。然后，我们在模板中使用了vue-grid-layout组件，并传入了一些属性来配置布局的行为和样式。在布局中，我们使用v-for指令遍历layout数组，并将每个item渲染为一个div元素。

以上是一个简单的vue-grid-layout代码示例，你可以根据自己的需求进行进一步的定制和扩展。