一个Vue.js组件，用于创建可拖动和可调整大小的网格布局

变更日志：

v2.3.8（07/31/2020）

• 使边际反应
• 添加了缺少的“布局更新”事件
• 支持初始响应式布局和断点更改事件
• 错误修正了布局项被删除且未设置interactObj时可能出现的错误
• 修复响应模式下错误的网格项目排序

11/02/2019

• v2.3.7

特性

• 可拖拽
• 可调整大小
• 静态部件（不可拖拽、调整大小）
• 拖拽和调整大小时进行边界检查
• 增减部件时避免重建栅格
• 可序列化和还原的布局
• 自动化 RTL 支持
• 响应式

安装和下载：

npm install vue-grid-layout

使用：

1.引入

import VueGridLayout from 'vue-grid-layout';

2.加入到 Vue 组件

   export default {
       components: {
           GridLayout: VueGridLayout.GridLayout,
           GridItem: VueGridLayout.GridItem
       },
   // ... 数据、方法、mounted（）等。
   }
   

属性

• layout
  • type: Array
  • required: true

  数据源。值必须为 Array，其数据项为 Object。 每条数据项必须有 i, x, y, w 和 h 属性。 请参考下面的 GridItem。

• colNum
  • type: Number
  • required: false
  • default: 12

  定义栅格系统的列数，其值需为自然数。

• rowHeight
  • type: Number
  • required: false
  • default: 150

  每行的高度，单位像素。

• maxRows
  • type: Number
  • required: false
  • default: Infinity

  定义最大行数。

• margin
  • type: Array
  • required: false
  • default: [10, 10]

  定义栅格中的元素边距。

  值必须是包含两个 Number的数组，数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素。

• isDraggable
  • type: Boolean
  • required: false
  • default: true

  标识栅格中的元素是否可拖拽。

• isResizable
  • type: Boolean
  • required: false
  • default: true

  标识栅格中的元素是否可调整大小。

• isMirrored
  • type: Boolean
  • required: false
  • default: false

  标识栅格中的元素是否可镜像反转。

• autoSize
  • type: Boolean
  • required: false
  • default: true

  标识容器是否自动调整大小。

• verticalCompact
  • type: Boolean
  • required: false
  • default: true

  标识布局是否垂直压缩。

• useCssTransforms
  • type: Boolean
  • required: false
  • default: true

  标识是否使用CSS属性 transition-property: transform;。

• responsive
  • type: Boolean
  • required: false
  • default: false

  标识布局是否为响应式。

• breakpoints
  • type: Object
  • required: false
  • default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }

  为响应式布局设置断点。

• cols
  • type: Object
  • required: false
  • default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }

  设置每个断点对应的列数。

GridItem

• i
  • type: String
  • required: true

  栅格中元素的ID。

• x
  • type: Number
  • required: true

  标识栅格元素位于第几列，需为自然数。

• y
  • type: Number
  • required: true

  标识栅格元素位于第几行，需为自然数。

• w
  • type: Number
  • required: true

  标识栅格元素的初始宽度，值为colWidth的倍数。

• h
  • type: Number
  • required: true

  标识栅格元素的初始高度，值为rowHeight的倍数。

• minW
  • type: Number
  • required: false
  • default: 1

  栅格元素的最小宽度，值为colWidth的倍数。

  如果w小于minW，则minW的值会被w覆盖。

• minH
  • type: Number
  • required: false
  • default: 1

  栅格元素的最小高度，值为rowHeight的倍数。

  如果h小于minH，则minH的值会被h覆盖。

• maxW
  • type: Number
  • required: false
  • default: Infinity

  栅格元素的最大宽度，值为colWidth的倍数。

  如果w大于maxW，则maxW的值会被w覆盖。

• maxH
  • type: Number
  • required: false
  • default: Infinity

  栅格元素的最大高度，值为rowHeight的倍数。

  如果h大于maxH，则maxH的值会被h覆盖。

• isDraggable
  • type: Boolean
  • required: false
  • default: null

  标识栅格元素是否可拖拽。如果值为null则取决于父容器。

• isResizable
  • type: Boolean
  • required: false
  • default: null

  标识栅格元素是否可调整大小。如果值为null则取决于父容器。

• static
  • type: Boolean
  • required: false
  • default: false

  标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。

• dragIgnoreFrom
  • type: String
  • required: false
  • default: 'a, button'

  标识栅格元素中哪些子元素无法触发拖拽事件，值为css-like选择器。

• dragAllowFrom
  • type: String
  • required: false
  • default: null

  标识栅格元素中哪些子元素可以触发拖拽事件，值为css-like选择器。

  如果值为null则表示所有子元素（dragIgnoreFrom的除外）。

• resizeIgnoreFrom
  • type: String
  • required: false
  • default: 'a, button'

  标识栅格元素中哪些子元素无法触发调整大小的事件，值为css-like选择器。