vue实现gridlayout显示

实现 Vue Grid Layout 的基本步骤

安装 vue-grid-layout 依赖包
通过 npm 或 yarn 安装该库：

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

引入组件并注册
在 Vue 组件中导入并注册 GridLayout 和 GridItem：

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

export default {
  components: {
    GridLayout,
    GridItem
  }
}

基本布局配置

定义布局数据
在组件的 data 中初始化布局配置：

data() {
  return {
    layout: [
      { x: 0, y: 0, w: 2, h: 2, i: '0' },
      { x: 2, y: 0, w: 2, h: 4, i: '1' }
    ]
  }
}

模板中使用组件
在模板中绑定布局数据：

<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"
    :key="item.i"
  >
    {{ 'Item ' + item.i }}
  </grid-item>
</grid-layout>

响应式与动态调整

监听布局变化事件
通过 @layout-updated 事件捕获布局变化：

methods: {
  handleLayoutUpdate(newLayout) {
    this.layout = newLayout;
  }
}

动态添加/删除项
通过修改 layout 数组实现动态调整：

addItem() {
  const newIndex = this.layout.length.toString();
  this.layout.push({
    x: 0, y: 0, w: 2, h: 2, i: newIndex
  });
}

样式定制

自定义栅格样式
通过 CSS 覆盖默认样式：

.vue-grid-layout {
  background: #f0f0f0;
}
.vue-grid-item:not(.vue-grid-placeholder) {
  background: #fff;
  border: 1px solid #ddd;
}

响应式断点配置
设置不同屏幕尺寸的布局：

data() {
  return {
    responsiveLayouts: {
      lg: [...], // 大屏布局
      md: [...], // 中屏布局
      sm: [...]  // 小屏布局
    }
  }
}

注意事项

• 每个 GridItem 必须具有唯一的 i 标识符
• col-num 默认值为 12，可根据需要调整
• 拖动和缩放需显式启用 is-draggable 和 is-resizable
• 复杂场景建议结合 vuex 管理布局状态