您的位置:

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