vue实现gridlayout显示
Vue 实现 Grid Layout 显示
使用 CSS Grid 布局
CSS Grid 是一种强大的布局方式，可以直接在 Vue 模板中使用。通过定义 display: 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', 'Item 5', 'Item 6']
}
}
}
</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 是一个专门为 Vue 设计的拖拽网格布局库，支持动态调整网格项的位置和大小。
安装库：
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: '0' },
{ x: 2, y: 0, w: 2, h: 4, i: '1' },
{ x: 4, y: 0, w: 2, h: 5, i: '2' }
]
}
}
}
</script>使用 Bootstrap Vue 网格系统
Bootstrap Vue 提供了响应式网格系统，适合快速搭建布局。
安装 Bootstrap Vue：
npm install bootstrap-vue bootstrap使用示例：
<template>
<b-container>
<b-row>
<b-col v-for="(item, index) in items" :key="index" cols="12" md="4">
{{ item }}
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
}
}
}
</script>使用 Vue Draggable 实现可拖拽网格
如果需要拖拽功能，可以结合 vue-draggable 实现。
安装库：
npm install vuedraggable使用示例：
<template>
<draggable v-model="items" tag="div" class="grid-container">
<div v-for="(item, index) in items" :key="index" class="grid-item">
{{ item }}
</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
}
}
}
</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>以上方法可以根据需求选择，CSS Grid 适合简单布局，vue-grid-layout 适合复杂拖拽布局，Bootstrap Vue 适合快速响应式布局，vue-draggable 适合需要拖拽功能的场景。
