当前位置：首页 > VUE

vue 实现grid

2026-02-10 00:09:13VUE

Vue 实现 Grid 布局的方法

使用 Vue 实现 Grid 布局可以通过多种方式，包括原生 CSS Grid、第三方库或组件。以下是几种常见的方法：

使用原生 CSS Grid

Vue 可以直接结合原生 CSS Grid 实现灵活的布局。以下是一个简单的示例：

<template>
  <div class="grid-container">
    <div v-for="item in items" :key="item.id" class="grid-item">
      {{ item.content }}
    </div>
  </div>
</template>

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

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

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

使用第三方库（如 Vue Grid Layout）

如果需要更复杂的拖拽和动态调整功能，可以使用第三方库如 vue-grid-layout。

安装依赖：

npm install vue-grid-layout

示例代码：

<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"
    >
      {{ 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: "1" },
        { x: 2, y: 0, w: 2, h: 4, i: "2" },
      ],
    };
  },
};
</script>

使用 Tailwind CSS 的 Grid 功能

如果项目中使用了 Tailwind CSS，可以直接通过其提供的 Grid 工具类实现布局。

<template>
  <div class="grid grid-cols-3 gap-4">
    <div v-for="item in items" :key="item.id" class="bg-gray-100 p-4">
      {{ item.content }}
    </div>
  </div>
</template>

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

使用 Bootstrap Vue 的 Grid 组件

对于使用 Bootstrap Vue 的项目，可以直接使用其内置的 Grid 组件。

安装依赖：

npm install bootstrap-vue

示例代码：

<template>
  <b-container>
    <b-row>
      <b-col v-for="item in items" :key="item.id" cols="4">
        {{ item.content }}
      </b-col>
    </b-row>
  </b-container>
</template>

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