Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jbaysolutions/vue-grid-layout

A draggable and resizable grid layout, for Vue.js.
https://github.com/jbaysolutions/vue-grid-layout

drag-and-drop grid grid-layout resize vue vuejs2 widget

Last synced: 6 days ago
JSON representation

A draggable and resizable grid layout, for Vue.js.

Awesome Lists containing this project

README

        

vue-grid-layout



vue-grid-layout是一个类似于[Gridster](http://dsmorse.github.io/gridster.js/)的栅格布局系统, 适用于Vue.js。 **灵感源自于 [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**

### **当前版本:** 2.4.0 (支持 Vue 2.2+)

### **Vue 2.1.10 及以下请使用 [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**
### **Vue 1 请使用 [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)**


[**[在线演示](https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html) | [更新日志](/CHANGELOG.md)**]

[English](./README.md) | 简体中文

#### 成功案例

- [DocsFold](https://www.docsfold.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)
- [Draxed](https://www.draxed.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)
- [Data Providers](https://www.dataproviders.io/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)
- [Cataholic](https://cataholic.glitch.me/)

*您还知悉其他项目? 请创建一个PR,谢谢!*

## 特性

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

## 入门指南

### 安装

#### npm

# 使用 npm
npm install vue-grid-layout --save

# 使用 yarn
yarn add vue-grid-layout

引入

```javascript
import VueGridLayout from 'vue-grid-layout';
```

加入到 Vue 组件

```javascript
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
// ... data, methods, mounted (), etc.
}

```

#### 浏览器

在页面中使用已打包好的 [文件](https://github.com/jbaysolutions/vue-grid-layout/releases)。 此时组件已为可用状态。

```html

```

### 使用

```javascript
var testLayout = [
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
{"x":6,"y":3,"w":2,"h":4,"i":"9"},
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
];

new Vue({
el: '#app',
data: {
layout: testLayout,
},
});
```

```html


{{item.i}}


```

### 文档

#### 属性

##### GridLayout

* **layout**

* type: `Array`
* required: `true`

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

* **responsiveLayouts**

* type: `Object`
* required: `false`
* default: `{}`

如果 `responsive` 设置为 `true`,该配置将作为栅格中每个断点的初始布局。键值是断点名称,每项的值都是类似 `layout` 属性定义的数据结构,值必须为 `Array`,其数据项为 `Object`。例如: `{lg: [layout items], md: [layout items]}`。需要注意的是,在创建栅格布局后设置该属性无效。

* **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 }

为响应式布局设置断点,其中参数代表不同设备的宽度:lg(large),md(medium),sm(small),xs(extra small)。

* **cols**

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

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

* **useStyleCursor**

* type: `Boolean`
* required: `false`
* default: `true`

标识是否使用动态鼠标指针样式。当拖动出现卡顿时,将此值设为 `false`也许可以缓解布局问题。

* **preventCollision**

* type: `Boolean`
* default: `false`

值设置为ture时,栅格只能拖动至空白处。

##### 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`选择器。

请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`ignoreFrom`。

* **dragAllowFrom**

* type: `String`
* required: `false`
* default: `null`

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

如果值为`null`则表示所有子元素(`dragIgnoreFrom`的除外)。

请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`allowFrom`。

* **resizeIgnoreFrom**

* type: `String`
* required: `false`
* default: `'a, button'`

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

请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`ignoreFrom`。

#### 事件

每一个栅格元素`grid-item`上都可以添加监听器,用于监听移动和调整大小事件,这样父级Vue对象就可以收到通知。

[示例](https://jbaysolutions.github.io/vue-grid-layout/examples/02-events.html)

````html


{{item.i}}


````

* **layoutCreatedEvent**

对应Vue生命周期的`created`

```javascript
layoutCreatedEvent: function(newLayout){
console.log("Created layout: ", newLayout)
}
```

* **layoutBeforeMountEvent**

对应Vue生命周期的`beforeMount`

```javascript
layoutBeforeMountEvent: function(newLayout){
console.log("beforeMount layout: ", newLayout)
}
```

* **layoutMountedEvent**

对应Vue生命周期的`mounted`

```javascript
layoutMountedEvent: function(newLayout){
console.log("Mounted layout: ", newLayout)
}
```

* **layoutReadyEvent**

当完成mount中的所有操作时生成的事件

```javascript
layoutReadyEvent: function(newLayout){
console.log("Ready layout: ", newLayout)
}
```

* **layoutUpdatedEvent**

更新事件(布局更新或栅格元素的位置重新计算)

```javascript
layoutUpdatedEvent: function(newLayout){
console.log("Updated layout: ", newLayout)
}
```

* **moveEvent**

移动时的事件

```javascript
moveEvent: function(i, newX, newY){
console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
},
```

* **resizeEvent**

调整大小时的事件

```javascript
resizeEvent: function(i, newH, newW, newHPx, newWPx){
console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
},
```

* **movedEvent**

移动后的事件

```javascript
movedEvent: function(i, newX, newY){
console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
},
```

* **resizedEvent**

调整大小后的事件

```javascript
/**
*
* @param i the item id/index
* @param newH new height in grid rows
* @param newW new width in grid columns
* @param newHPx new height in pixels
* @param newWPx new width in pixels
*
*/
resizedEvent: function(i, newH, newW, newHPx, newWPx){
console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
},
```

## 如何贡献

请提交issue或PR。

## 待办事项

- [x] 基础栅格布局
- [x] 响应式
- [x] 可拖拽的栅格元素
- [x] 可调整大小的栅格元素
- [x] 静态元素
- [x] 每个元素的Min/max w/h