vue-grid-layout詳解

`vue-grid-layout` 教程

vue-grid-layout 是一個用于 Vue.js 的響應式拖放網格布局組件，允許開發者創建可調整大小、可拖放的布局，廣泛用于儀表板、管理面板等復雜布局需求。本教程將介紹如何安裝、配置和使用 vue-grid-layout。

安裝

你可以通過 npm 或 yarn 安裝 vue-grid-layout。

npm install vue-grid-layout
# or
yarn add vue-grid-layout

基本使用

布局設置

以下示例展示了如何定義一個簡單的拖放網格布局。

<template><GridLayout:layout.sync="layout":col-num="12":row-height="30":is-draggable="true":is-resizable="true":vertical-compact="true":use-css-transforms="true"><GridItemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h"><div class="grid-item">{{ item.i }}</div></GridItem></GridLayout>
</template><script>
import { GridLayout, GridItem } from "vue-grid-layout";export default {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 },],};},
};
</script><style scoped>
.grid-item {background-color: #b3cde0;border: 1px solid #ccc;display: flex;align-items: center;justify-content: center;
}
</style>

拖拽和調整大小

在 GridLayout 中設置 is-draggable 和 is-resizable 為 true 可以啟用拖拽和調整大小功能。

:is-draggable="true": 啟用拖拽功能。
:is-resizable="true": 啟用調整大小功能。

<template><GridLayout :layout.sync="layout" :is-draggable="true" :is-resizable="true"><GridItemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h"><div class="grid-item">{{ item.i }}</div></GridItem></GridLayout>
</template>

高級使用

響應式布局

vue-grid-layout 支持響應式布局，可以為不同的屏幕尺寸設置不同的列數和斷點。

<template><GridLayout:layout.sync="layout":col-num="12":row-height="30":breakpoints="{ lg: 1200, md: 996, sm: 768, xs: 480 }":cols="{ lg: 12, md: 10, sm: 8, xs: 6 }"><GridItemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h"><div class="grid-item">{{ item.i }}</div></GridItem></GridLayout>
</template>

保存和加載布局

可以將當前布局保存到 localStorage，并在頁面重新加載時從 localStorage 中恢復布局。

<template><GridLayout:layout.sync="layout":col-num="12":row-height="30":is-draggable="true":is-resizable="true"@layout-updated="onLayoutUpdated"><GridItemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h"><div class="grid-item">{{ item.i }}</div></GridItem></GridLayout><button @click="saveLayout">Save Layout</button>
</template><script>
import { GridLayout, GridItem } from "vue-grid-layout";export default {components: {GridLayout,GridItem,},data() {return {layout: JSON.parse(localStorage.getItem("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 },],};},methods: {onLayoutUpdated(newLayout) {this.layout = newLayout;},saveLayout() {localStorage.setItem("layout", JSON.stringify(this.layout));},},
};
</script>

好的，這里是 vue-grid-layout 的所有重要屬性的詳細列表，包括 GridLayout 和 GridItem 組件的屬性。

屬性

GridLayout 屬性

`layout`

類型: Array<Object>
默認值: []
描述: 定義布局中所有網格項的數組，每個對象應包含 i、x、y、w、h 等屬性。

`col-num`

類型: Number
默認值: 12
描述: 網格系統的列數。

`row-height`

類型: Number
默認值: 150
描述: 每一行的高度（以像素為單位）。

`is-draggable`

類型: Boolean
默認值: true
描述: 是否允許拖動網格項。

`is-resizable`

類型: Boolean
默認值: true
描述: 是否允許調整網格項大小。

`vertical-compact`

類型: Boolean
默認值: true
描述: 是否啟用垂直方向的緊湊排列。

`use-css-transforms`

類型: Boolean
默認值: true
描述: 是否使用 CSS 變換 (transform) 來移動網格項。

`margin`

類型: Array<Number>
默認值: [10, 10]
描述: 網格項之間的間距，格式為 [水平間距, 垂直間距]。

`container-padding`

類型: Array<Number>
默認值: [10, 10]
描述: 網格容器的內邊距，格式為 [水平內邊距, 垂直內邊距]。

`max-cols`

類型: Number
默認值: Infinity
描述: 布局中最大列數。

`max-rows`

類型: Number
默認值: Infinity
描述: 布局中最大行數。

`auto-size`

類型: Boolean
默認值: true
描述: 是否自動調整容器高度以適應網格項高度。

`draggable-handle`

類型: String
默認值: ''
描述: 網格項中可用于拖動的 CSS 選擇器。例：.handle。

`draggable-cancel`

類型: String
默認值: ''
描述: 網格項中禁止拖動的 CSS 選擇器。例：.no-drag。

`resize-handle`

類型: Array<String>
默認值: ['se']
描述: 用于調整大小的 CSS 選擇器數組，支持 ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']。

`breakpoints`

類型: Object
默認值: {}
描述: 定義不同設備寬度下的斷點，格式為 { 斷點名稱: 像素值 }。例：{ lg: 1200, md: 996, sm: 768, xs: 480 }。

`cols`

類型: Object
默認值: {}
描述: 定義不同斷點下的列數，格式為 { 斷點名稱: 列數 }。例：{ lg: 12, md: 10, sm: 8, xs: 6 }。

`GridItem` 屬性

`i`

類型: String
默認值: ''
描述: 網格項的唯一標識符，通常用于數據綁定。

`x`

類型: Number
默認值: 0
描述: 網格項的橫向起始位置（從 0 開始計數）。

`y`

類型: Number
默認值: 0
描述: 網格項的縱向起始位置（從 0 開始計數）。

`w`

類型: Number
默認值: 1
描述: 網格項的寬度，以列數為單位。

`h`

類型: Number
默認值: 1
描述: 網格項的高度，以行數為單位。

`is-draggable`

類型: Boolean
默認值: true
描述: 單個網格項是否可拖動。

`is-resizable`

類型: Boolean
默認值: true
描述: 單個網格項是否可調整大小。

`min-w`

類型: Number
默認值: 1
描述: 網格項的最小寬度（列數）。

`max-w`

類型: Number
默認值: Infinity
描述: 網格項的最大寬度（列數）。

`min-h`

類型: Number
默認值: 1
描述: 網格項的最小高度（行數）。

`max-h`

類型: Number
默認值: Infinity
描述: 網格項的最大高度（行數）。

`static`

類型: Boolean
默認值: false
描述: 如果設為 true，網格項將不能拖動或調整大小。

事件處理

vue-grid-layout 提供了豐富的事件用于處理布局變化。

@layout-updated: 當布局改變時觸發。
@drag-start, @drag, @drag-stop: 拖動事件。
@resize-start, @resize, @resize-stop: 調整大小事件。

<template><GridLayout:layout.sync="layout":col-num="12"@layout-updated="handleLayoutUpdated"><GridItemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h"><div class="grid-item">{{ item.i }}</div></GridItem></GridLayout>
</template><script>
import { GridLayout, GridItem } from "vue-grid-layout";export default {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 },],};},methods: {handleLayoutUpdated(newLayout) {console.log("Layout updated:", newLayout);},},
};
</script>

樣式自定義

你可以根據項目需求自定義每個 GridItem 的樣式。以下是一個簡單的樣式示例。

<template><GridLayout :layout.sync="layout" :col-num="12" :row-height="30"><GridItemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h"><div class="custom-grid-item">{{ item.i }}</div></GridItem></GridLayout>
</template><style scoped>
.custom-grid-item {background-color: #f0f0f0;border: 1px solid #ddd;display: flex;align-items: center;justify-content: center;padding: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>