vue实现grid动态布局

Vue 实现动态 Grid 布局

使用 CSS Grid 和动态数据绑定

通过 Vue 的 v-for 指令结合 CSS Grid 实现动态布局。在模板中定义 grid 容器，动态渲染子元素。

<template>
  <div class="grid-container">
    <div 
      v-for="(item, index) in gridItems" 
      :key="index" 
      class="grid-item"
      :style="{ 'grid-area': item.area }"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridItems: [
        { area: 'header', content: 'Header' },
        { area: 'sidebar', content: 'Sidebar' },
        { area: 'main', content: 'Main Content' },
        { area: 'footer', content: 'Footer' }
      ]
    };
  }
};
</script>

<style>
.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 10px;
  padding: 10px;
}

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

响应式动态调整布局

通过监听窗口大小或使用 Vue 的计算属性动态修改 grid-template-columns 或 grid-template-rows。

<template>
  <div 
    class="responsive-grid" 
    :style="{ 'grid-template-columns': gridColumns }"
  >
    <div v-for="n in itemCount" :key="n" class="grid-item">
      Item {{ n }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemCount: 6,
      screenWidth: window.innerWidth
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth;
    }
  },
  computed: {
    gridColumns() {
      return this.screenWidth > 768 ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)';
    }
  }
};
</script>

<style>
.responsive-grid {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.grid-item {
  background: #ddd;
  padding: 15px;
  text-align: center;
}
</style>

使用第三方库实现复杂交互

对于需要拖拽排序、动态调整大小等高级功能，可以使用 vue-grid-layout 这类专门库。

安装依赖：

npm install vue-grid-layout

示例实现：

<template>
  <grid-layout
    :layout.sync="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"
      :i="item.i"
    >
      {{ item.text }}
    </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', text: 'Item 1' },
        { x: 2, y: 0, w: 2, h: 4, i: '1', text: 'Item 2' },
        { x: 4, y: 0, w: 2, h: 5, i: '2', text: 'Item 3' }
      ]
    };
  }
};
</script>

动态添加/删除网格项

结合 Vue 的响应式数据实现网格项的增删功能。

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
    <div class="dynamic-grid">
      <div v-for="(item, index) in items" :key="index" class="grid-cell">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      counter: 3
    };
  },
  methods: {
    addItem() {
      this.counter++;
      this.items.push(`Item ${this.counter}`);
    },
    removeItem() {
      if (this.items.length > 0) {
        this.items.pop();
        this.counter--;
      }
    }
  }
};
</script>

<style>
.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.grid-cell {
  background: #f0f0f0;
  padding: 15px;
  text-align: center;
}
</style>

这些方法覆盖了从基础到高级的 Vue 动态网格布局实现，可根据具体需求选择适合的方案。CSS Grid 提供原生支持，而第三方库能快速实现复杂交互功能。