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是一个非常方便实用的组件，可以实现动态布局的需要，适合于大部分需要具有灵活性的页面中使用。不过需要注意的是，该组件目前只支持在基于浏览器的环境中运行，如果需要在非浏览器环境中使用，建议考虑使用其他组件。