vue grid实现

Vue Grid 实现方法

使用 CSS Grid 布局

通过原生 CSS Grid 布局可以快速实现网格系统，Vue 中直接绑定样式或类名即可。

<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(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.grid-item {
  background: #f0f0f0;
  padding: 16px;
}
</style>

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

vue-grid-layout 提供拖拽和响应式网格功能，适合复杂场景。

npm install vue-grid-layout

<template>
  <grid-layout
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="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.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>

使用 UI 框架（如 Element UI）

Element UI 的 el-row 和 el-col 提供基于 Flex 的栅格系统。

<template>
  <el-row :gutter="20">
    <el-col :span="6" v-for="(item, index) in 4" :key="index">
      <div class="grid-content">{{ item }}</div>
    </el-col>
  </el-row>
</template>

<style>
.grid-content {
  background: #f0f0f0;
  padding: 16px;
}
</style>

响应式网格

通过监听窗口大小或使用 CSS 媒体查询实现响应式布局。

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

<style>
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 600px) {
  .responsive-grid {
    grid-template-columns: 1fr;
  }
}
</style>

动态网格生成

结合 Vue 的计算属性动态生成网格结构和数据。

<template>
  <div class="dynamic-grid" :style="gridStyle">
    <div v-for="(item, index) in gridData" :key="index" class="cell">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: 3,
      gridData: [1, 2, 3, 4, 5, 6],
    };
  },
  computed: {
    gridStyle() {
      return {
        display: "grid",
        "grid-template-columns": `repeat(${this.columns}, 1fr)`,
      };
    },
  },
};
</script>

以上方法覆盖了从原生实现到高级库的多种场景，可根据需求选择。