阅读数:101 评论数:0

一、概述

它允许你创建一个可拖拽和可调整大小的网格布局，非常适合用于仪表板、表单布局等需要灵活布局的场景。

https://jbaysolutions.github.io/vue-grid-layout/zh/guide/

二、使用

1、安装

npm install vue-grid-layout

2、基本使用

（1）创建一个新的Vue组件

<template>
  <grid-layout
    :layout="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :vertical-compact="true"
    :margin="[10, 10]"
    @layout-updated="onLayoutUpdated"
  >
    <grid-item
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
    >
      <div class="grid-item-content">{{ item.i }}</div>
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';

export default {
  name: 'MyGridLayout',
  components: {
    GridLayout,
    GridItem,
  },
  data() {
    return {
      layout: [
        { i: '0', x: 0, y: 0, w: 2, h: 2 },
        { i: '1', x: 2, y: 0, w: 2, h: 4 },
        { i: '2', x: 4, y: 0, w: 2, h: 5 },
        { i: '3', x: 6, y: 0, w: 2, h: 3 },
        { i: '4', x: 8, y: 0, w: 2, h: 3 },
        { i: '5', x: 10, y: 0, w: 2, h: 3 },
      ],
    };
  },
  methods: {
    onLayoutUpdated(newLayout) {
      console.log('Layout updated:', newLayout);
    },
  },
};
</script>

<style scoped>
.grid-item-content {
  background: #ccc;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>

（2）解释

• GridLayout 组件：这是网格布局的容器组件，负责管理所有的网格项。
• GridItem 组件：这是单个网格项组件，可以拖拽和调整大小。
• layout 数据：这是一个数组，定义了每个网格项的初始位置和大小。每个对象包含以下属性：
  • i：网格项的唯一标识符。
  • x：网格项的初始横向位置（列索引）。
  • y：网格项的初始纵向位置（行索引）。
  • w：网格项的宽度（跨越的列数）。
  • h：网格项的高度（跨越的行数）。

（3）主要属性和事件

• col-num：定义网格的列数。
• row-height：定义每行的高度，以像素为单位。
• is-draggable：布尔值，控制网格项是否可拖拽。
• is-resizable：布尔值，控制网格项是否可调整大小。
• vertical-compact：布尔值，控制网格项是否垂直紧凑排列。
• margin：数组，定义网格项之间的间距，以像素为单位。
• layout-updated 事件：当网格布局更新时触发，可以用来获取新的布局信息。

3、高级用法

（1）动态添加和移除网格项

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
    <grid-layout
      :layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :margin="[10, 10]"
      @layout-updated="onLayoutUpdated"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
      >
        <div class="grid-item-content">{{ item.i }}</div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';

export default {
  name: 'MyGridLayout',
  components: {
    GridLayout,
    GridItem,
  },
  data() {
    return {
      layout: [
        { i: '0', x: 0, y: 0, w: 2, h: 2 },
        { i: '1', x: 2, y: 0, w: 2, h: 4 },
        { i: '2', x: 4, y: 0, w: 2, h: 5 },
        { i: '3', x: 6, y: 0, w: 2, h: 3 },
        { i: '4', x: 8, y: 0, w: 2, h: 3 },
        { i: '5', x: 10, y: 0, w: 2, h: 3 },
      ],
      nextId: 6,
    };
  },
  methods: {
    addItem() {
      this.layout.push({ i: `${this.nextId}`, x: 0, y: 0, w: 2, h: 2 });
      this.nextId++;
    },
    removeItem() {
      this.layout.pop();
    },
    onLayoutUpdated(newLayout) {
      console.log('Layout updated:', newLayout);
    },
  },
};
</script>

<style scoped>
.grid-item-content {
  background: #ccc;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>