vue实现gridlayout

Vue 实现 Grid Layout

使用 CSS Grid 布局

CSS Grid 是一种强大的布局系统，可以直接在 Vue 组件的样式中使用。通过定义网格容器和网格项，可以快速实现复杂的布局结构。

<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 是一个专门为 Vue 设计的拖拽网格布局库，支持动态调整网格项的位置和大小。

安装库：

npm install vue-grid-layout

示例代码：

<template>
  <grid-layout
    :layout="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    @layout-updated="layoutUpdatedEvent"
  >
    <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' },
        { x: 4, y: 0, w: 2, h: 5, i: '2' }
      ]
    }
  },
  methods: {
    layoutUpdatedEvent(newLayout) {
      console.log('Updated layout: ', newLayout)
    }
  }
}
</script>

使用 Bootstrap Grid 系统

如果项目已经使用 Bootstrap，可以直接利用其栅格系统实现响应式布局。

安装 Bootstrap：

npm install bootstrap

示例代码：

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

<script>
import 'bootstrap/dist/css/bootstrap.css'

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

使用 Flexbox 布局

Flexbox 是另一种常用的布局方式，适合一维布局场景，可以结合 Vue 实现灵活的网格效果。

<template>
  <div class="flex-container">
    <div v-for="item in items" :key="item.id" class="flex-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>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

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