VueGridLayout官網詳細介紹

一、安裝配置

VueGridLayout是一個靈活、高效的可拖拽、可調整大小的網格布局組件，可以輕鬆實現動態布局。在使用前需要進行安裝。

首先，需要安裝依賴:

npm i vue-grid-layout --save

然後，在main.js中，進行以下配置操作:

import Vue from 'vue'
import VueGridLayout from 'vue-grid-layout'

Vue.use(VueGridLayout)

二、基礎用法

VueGridLayout的基礎使用如下:

<template>
  <vue-grid-layout
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :vertical-compact="false"
    :use-css-transforms="true"
    :responsive="true"
    :breakpoints="{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}"
    :cols="{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}"
    @drag-start="handleDragStart"
    @drag="handleDrag"
    @drag-stop="handleDragStop"
    @resize-start="handleResizeStart"
    @resize="handleResize"
    @resize-stop="handleResizeStop"
  >
    <!-- 添加子組件 -->
  </vue-grid-layout>
</template>

<script>
export default {
  data() {
    return {
      layout: [
        { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
        { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
        { i: 'c', x: 4, y: 0, w: 1, h: 2 }
      ]
    }
  },
  methods: {
    handleDragStart(event, element) {},
    handleDrag(event, element) {},
    handleDragStop(event, element) {},
    handleResizeStart(event, element) {},
    handleResize(event, element) {},
    handleResizeStop(event, element) {}
  }
}
</script>

三、API文檔

以下是VueGridLayout的可配置API:

• layout(必須): 網格項的位置和大小描述

  {
    i: string, // 網格項目的唯一標識符，必須
    x: number, // 網格項在水平方向上的起點位置
    y: number, // 網格項在垂直方向上的起點位置
    w: number, // 網格項的寬度，單位為格
    h: number, // 網格項的高度，單位為格
    minW: ?number, // 網格項的最小寬度，單位為格
    maxW: ?number, // 網格項的最大寬度，單位為格
    minH: ?number, // 網格項的最小高度，單位為格
    maxH: ?number, // 網格項的最大高度，單位為格
    moved: ?boolean, // 是否是一個被移動過的網格項
    static: ?boolean // 是否是一個靜態的網格項，不允許移動和調整大小
  }

• col-num(必須): 定義網格布局的總列數

  :col-num="12"

• row-height(必須): 定義網格布局的每一行的高度

  :row-height="30"

• is-draggable: 網格項是否可拖拽，默認為true

  :is-draggable="true"

• is-resizable: 網格項是否可調整大小，默認為true

  :is-resizable="true"

• vertical-compact: 是否將網格項垂直壓縮來實現自動布局，默認為false

  :vertical-compact="false"

• use-css-transforms: 是否通過css transform來實現移動和調整大小，默認為true

  :use-css-transforms="true"

• responsive: 是否啟用響應式布局，默認為false

  :responsive="true"

• breakpoints: 指定在哪些屏幕寬度下使用多少列。eg: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}

  :breakpoints="{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}"

• cols: 指定在對應屏幕寬度下使用多少列。eg: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}

  :cols="{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}"

• 新增事件:

  • drag-start: 開始拖拽時觸發

  • drag: 拖拽過程中觸發

  • drag-stop: 停止拖拽時觸發

  • resize-start: 開始調整大小時觸發

  • resize: 調整大小過程中觸發

  • resize-stop: 停止調整大小時觸發

四、插槽

VueGridLayout也支持插槽，允許開發者在網格布局中添加其他組件或內容，如下:

<vue-grid-layout>
  <template v-for="(item, index) in layout" :key="index" v-if="!item.isVue">
    <div :class="[item.i]" v-bind="item">
      <button v-if="item.widgetName === 'button' && !item.isHidden">Button</button>
      <input v-else-if="item.widgetName === 'input' && !item.isHidden" />
    </div>
  </template>
</vue-grid-layout>

五、總結

VueGridLayout是一個非常方便實用的組件，可以實現動態布局的需要，適合於大部分需要具有靈活性的頁面中使用。不過需要注意的是，該組件目前只支持在基於瀏覽器的環境中運行，如果需要在非瀏覽器環境中使用，建議考慮使用其他組件。