Vue.js的可拖动和可调整大小的网格布局 - vue-grid-layout

Vue.js的可拖动和可调整大小的网格布局 - vue-grid-layout
插件名称 vue-grid-layout
发布时间 2020年5月1日
插件作者 jbaysolutions

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

变更日志:

v2.3.11(10/13/2020)

  • 修复:使用响应式布局时的回归

v2.3.10(10/12/2020)

  • 将interact.js升级到1.10.0,现在作为ES6模块导入以优化大小
  • 修复:在RTL模式下调整网格项目的大小无法正常工作
  • 添加了GridLayout.useStyleCursor属性以修复可能的浏览器冻结
  • 修复:当GridItem不是GridLayout的子级时,父布局错误
  • 修复:在响应模式下再次隐藏/显示项目时,项目大小发生变化

v2.3.9(09/28/2020)

  • 修复插件安装

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。 每条数据项必须有 ixyw 和 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选择器。