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>以上方法覆盖了从原生实现到高级库的多种场景，可根据需求选择。
