当前位置：首页 > VUE

vue实现gridlayout

2026-01-13 06:42:26VUE

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>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4"],
    };
  },
};
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background: #eee;
  padding: 20px;
  text-align: center;
}
</style>

动态调整布局

通过 Vue 的响应式特性，可以动态调整网格布局。以下示例展示如何添加和删除网格项：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
    <grid-layout :layout="layout" :col-num="12">
      <grid-item v-for="item in layout" :key="item.i" v-bind="item">
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</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: 2, i: "1" },
      ],
      nextIndex: 2,
    };
  },
  methods: {
    addItem() {
      this.layout.push({
        x: (this.layout.length * 2) % 12,
        y: Infinity,
        w: 2,
        h: 2,
        i: this.nextIndex.toString(),
      });
      this.nextIndex++;
    },
    removeItem() {
      if (this.layout.length > 0) {
        this.layout.pop();
        this.nextIndex--;
      }
    },
  },
};
</script>

响应式设计

结合 Vue 的响应式数据和 CSS Media Queries，可以实现适应不同屏幕尺寸的网格布局：

vue实现gridlayout

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

以上方法提供了从简单到复杂的 Vue 网格布局实现方案，可根据项目需求选择适合的方式。