Vue-Grid-Layout 全面分析

Vue-Grid-Layout 是一個使用 Vue.js 實現的網格布局系統。您可以根據自己的需求配置其行列和單元格大小，並通過拖放方式來更改單元格的位置。本文將從多個方面對 Vue-Grid-Layout 進行詳細的闡述，包括安裝和使用、文檔和坑點、拖拽預覽、自定義高度、斷點和構建。

一、VueGridLayout 坑

使用 Vue-Grid-Layout 過程中有一些坑點需要注意。下面是一些容易踩到的坑點和解決方案。

1. 當配置 layout 時，需要保證 grid-item 和 grid-layout 組件由不同的父組件進行包裹

  
    <template> 
      <div>
        <VueGridLayout :layout="layout">
          <div v-for="item in layout"> 
            <div>{{ item.i }}</div> 
          </div> 
        </VueGridLayout>
      </div>
    </template>
  

2. 如果需要移除選中的元素，則需要使用 `vueGridLayout.$refs[‘your-grid-ref’].removeItem(item)` 方法

  
    const { $refs } = this.$refs.vueGridLayout;
    $refs.grid.remove(item); 
  

3. 當在內部使用 vue-form-generator 時，請藉助 slot-scope 將數據傳遞下去

  
    <vue-grid-layout>
      <template v-for="item in items" :slot="item.name" scoped-slot="scope">
        <div v-if="item.component">
          <component :is="item.component" v-model="form[item.model]" :readonly="disabled" />
        </div>
      </template>
    </vue-grid-layout>
  

二、VueGridLayout 官網

官網提供了完整的開發文檔、API文檔和示例代碼，為使用 Vue-Grid-Layout 提供了很好的參考。同時，Vue-Grid-Layou 官方還提供了多語言支持，方便全球開發者使用。

三、VueGridLayout 文檔

文檔提供了多種場景使用的示例，建議通過文檔去了解如何去使用各種 API，同時文檔重要性不言而喻，它能幫助開發者更加全面深入地了解 Vue-Grid-Layout。

四、VueGridLayout 拖拽預覽

Vue-Grid-Layout 支持拖拽預覽功能。通過取消 grid-item 的指定布局而使用 `transform: `來預覽將要拖放的元素的位置和大小。我們需要將通過拖拽獲取的 layout 數據和 refresh 做處理，以達到正確的效果。

<template>

<div :class="[dataMode2 ? 'mode2' : '', dataMode2 ? 'mode' : '']">

<vue-grid-layout :layout="layout.grid" :col-num="layout.col" :row-height="layout.rowHeight" :is-draggable="true" :is-resizable="true" :use-css-transforms="false" ref="grid">

<template v-for="(item, i) in layout.grid" :slot="item.i" :key="item.i" slot-scope="{ isDraggable, isResizable }">

<div :class="{ active: item.i === active }" :style="{ backgroundColor: item.bgColor }">

<span class="text">{{ item.i }}</span>

</div>

<div class="item-move-ghost" v-if="isDraggable">

<div :class="{ active: item.i === active }" :style="{ backgroundColor: item.bgColor,  transform: `translate(${transformBasicStyleValue(item.x)}px, ${transformBasicStyleValue(item.y)}px)`  }">

{{ item.i }}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/155283.html