目录
一、安装
二、使用
三、属性介绍
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: required: 这是栅格的初始布局。 数据源。值必须为 |
responsiveLayouts | type: required: default : 如果 |
colNum | type: required: default: 定义栅格系统的列数,其值需为自然数。 |
rowHeight | type: required: default: 每行的高度,单位像素。 |
maxRows | type: required: default: 定义最大行数。 |
margin | type: required: default: 定义栅格中的元素边距。 值必须是包含两个 |
isDraggable | type: required: default: 标识栅格中的元素是否可拖拽。 |
isResizable | type: required: default: 标识栅格中的元素是否可调整大小。 |
isMirrored | type: required: default: 标识栅格中的元素是否可镜像反转。 |
autoSize | type: required: default: 标识容器是否自动调整大小。 |
verticalCompact | type: required: default: 标识布局是否垂直压缩。 |
preventCollision | type: required: default: 防止碰撞属性,值设置为 |
useCssTransforms | type: required: default: 标识是否使用CSS属性 |
responsive | type: required: default: 标识布局是否为响应式。 可以查看 responsiveLayouts、breakpoints和 cols |
breakpoints | type: required: default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } 为响应式布局设置断点。 可以查看 responsiveLayouts 和 cols |
cols | type: required: default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } 设置每个断点对应的列数。 |
useStyleCursor | type: required: default: 标识是否使用动态鼠标指针样式。当拖动出现卡顿时,将此值设为 |
GridItem
属性名称 | 详情信息 |
i | type: required: 栅格中元素的ID。 |
x | type: required: 标识栅格元素位于第几列,需为自然数。 |
y | type: required: 标识栅格元素位于第几行,需为自然数。 |
w | type: required: 标识栅格元素的初始宽度,值为 |
h | type: required: 标识栅格元素的初始高度,值为 |
minW | type: required: default: 栅格元素的最小宽度,值为 如果 |
minH | type: required: default: 栅格元素的最小高度,值为 如果 |
maxW | type: required: default: 栅格元素的最大宽度,值为 如果 |
maxH | type: required: default: 栅格元素的最大高度,值为 如果 |
isDraggable | type: required: default: 标识栅格元素是否可拖拽。如果值为 |
isResizable | type: required: default: 标识栅格元素是否可调整大小。如果值为 |
static | type: required: default: 标识栅格元素是否为静态的(无法拖拽、调整大小或被其他元素移动)。 |
dragIgnoreFrom | type: required: default: 标识栅格元素中哪些子元素无法触发拖拽事件,值为 请参考interact.js docs (opens new window)中的 |
dragAllowFrom | type: required: default: 标识栅格元素中哪些子元素可以触发拖拽事件,值为 如果值为 请参考interact.js docs (opens new window)中的 |
resizeIgnoreFrom | type: required: default: 标识栅格元素中哪些子元素无法触发调整大小的事件,值为 请参考interact.js docs (opens new window)中的 |
四、事件介绍
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);
},