vue实现gridlayout

Vue 实现 GridLayout

使用 vue-grid-layout 库

vue-grid-layout 是一个专为 Vue 设计的响应式网格布局库，支持拖拽和调整大小。安装方式如下：

npm install vue-grid-layout --save

基本用法示例：

<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"
      :i="item.i"
    >
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout";

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

使用 CSS Grid 自定义实现

Vue 可以结合原生 CSS Grid 实现简单布局，无需额外依赖：

<template>
  <div class="grid-container">
    <div v-for="(item, index) in items" :key="index" class="grid-item">
      {{ item }}
    </div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background: #eee;
  padding: 20px;
}
</style>

动态响应式布局

通过计算属性实现响应式网格列数变化：

<script>
export default {
  data() {
    return { items: [1, 2, 3, 4, 5, 6] };
  },
  computed: {
    gridColumns() {
      return window.innerWidth < 600 ? 2 : 3;
    },
  },
};
</script>

注意事项

• vue-grid-layout 适合需要交互操作的场景，CSS Grid 适合静态布局
• 移动端需注意触控事件兼容性
• 复杂场景可结合 Vue 的动态组件实现条件渲染