vue项目中区域拖拽修改大小， Vue Grid Layout -️ 适用Vue.js的栅格布局系统

一、安装

二、使用

三、属性介绍

GridLayout

GridItem

四、事件介绍

GridLayout

layoutCreated

layoutBeforeMountEvent

layoutMountedEvent

layoutReadyEvent

layoutUpdatedEvent

breakpointChangedEvent

GridItem

moveEvent

resizeEvent

movedEvent

resizedEvent

containerResizedEvent

一、安装

vue2项目中：

npm install vue-grid-layout --save

vue3项目中：

npm install vue-grid-layout@3.0.0-beta1 --save

二、使用

在main.js中引入

// 引入import gridLayout from 'vue-grid-layout' // 挂载使用app.use(gridLayout)

在页面中使用

<template><div class="viewer"><el-button type="primary">测试按钮</el-button><grid-layout :layout.sync="state.layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true":is-mirrored="false" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true"><grid-item class="box" v-for="item in state.layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">{{ item.i }}</grid-item></grid-layout></div>
</template><script setup name="home">const state = reactive({layout: [{ "x": 0, "y": 0, "w": 2, "h": 4, "i": "first" },{ "x": 2, "y": 0, "w": 2, "h": 4, "i": "second" },{ "x": 4, "y": 0, "w": 2, "h": 4, "i": "third" },{ "x": 6, "y": 0, "w": 2, "h": 4, "i": "ringChart" },{ "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" }],
})onMounted(() => {console.log('state.layout',state.layout)
})</script><style scoped lang="scss">
.viewer {height: 100%;position: relative;.box{border: 1px solid #000;padding: 10px;background: #000;color: #fff;}
}
</style>

三、属性介绍

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]}`。需要注意的是，在创建栅格布局后设置该属性无效。在创建GridLayout之后设置prop无效。
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` 标识布局是否垂直压缩。
preventCollision	type: `Boolean` required: `false` default: `false` 防止碰撞属性，值设置为`ture`时，栅格只能拖动至空白处。
useCssTransforms	type: `Boolean` required: `false` default: `true` 标识是否使用CSS属性 `transition-property: transform;`。
responsive	type: `Boolean` required: `false` default: `false` 标识布局是否为响应式。可以查看 responsiveLayouts、breakpoints和 cols
breakpoints	type: `Object` required: `false` default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } 为响应式布局设置断点。可以查看 responsiveLayouts 和 cols
cols	type: `Object` required: `false` default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } 设置每个断点对应的列数。
useStyleCursor	type: `Boolean` required: `false` default: `true` 标识是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 `false`也许可以缓解布局问题。此属性无效

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: `null2` 标识栅格元素是否可调整大小。如果值为`null`则取决于父容器。
static	type: `Boolean` required: `false` default: `false` 标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。
dragIgnoreFrom	type: `String` required: `false` default: `'a, button'` 标识栅格元素中哪些子元素无法触发拖拽事件，值为`css-like`选择器。请参考interact.js docs (opens new window)中的`ignoreFrom`。
dragAllowFrom	type: `String` required: `false` default: `null` 标识栅格元素中哪些子元素可以触发拖拽事件，值为`css-like`选择器。如果值为`null`则表示所有子元素（`dragIgnoreFrom`的除外）。请参考interact.js docs (opens new window)中的`allowFrom`。
resizeIgnoreFrom	type: `String` required: `false` default: `'a, button'` 标识栅格元素中哪些子元素无法触发调整大小的事件，值为`css-like`选择器。请参考interact.js docs (opens new window)中的`ignoreFrom`。

四、事件介绍

GridLayout

layoutCreated

对应Vue生命周期的created

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

layoutBeforeMountEvent

对应Vue生命周期的beforeMount

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

layoutMountedEvent

对应Vue生命周期的mounted

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

layoutReadyEvent

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

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

layoutUpdatedEvent

布局updated事件

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

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

breakpointChangedEvent

断点更改事件

每次断点值由于窗口调整大小而改变

    /*** * @param newBreakpoint the breakpoint name* @param newLayout the chosen layout for the breakpoint* */breakpointChangedEvent: function(newBreakpoint, newLayout){console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );},

GridItem

moveEvent

移动时的事件

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

resizeEvent

调整大小时的事件

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

movedEvent

移动后的事件

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

resizedEvent

调整大小后的事件

    /*** * @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);},

containerResizedEvent

栅格元素/栅格容器更改大小的事件（浏览器窗口或其他）

 /*** * @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* */containerResizedEvent: function(i, newH, newW, newHPx, newWPx){console.log("CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);},